refactor(web): consolidate shape tokens and improve keyboard accessibility

apps/web/src/_settings-theme.scss

@@ -158,7 +158,7 @@
         flex-direction: column;
         gap: 14px;
         padding: 18px;
-        border-radius: 18px;
+        border-radius: var(--app-radius-2xl);
         border: 1px solid color-mix(in srgb, #ff4d6d 26%, transparent);
         background:
             radial-gradient(
@@ -207,7 +207,7 @@
         justify-content: center;
         width: 44px;
         height: 44px;
-        border-radius: 14px;
+        border-radius: var(--app-radius-xl);
         background: linear-gradient(135deg, #ff4d6d, #ff8b5e);
         color: #fff;
         box-shadow:
@@ -255,7 +255,7 @@
         align-items: center;
         gap: 12px;
         padding: 10px 14px;
-        border-radius: 14px;
+        border-radius: var(--app-radius-xl);
         border: 1px solid transparent;
         text-decoration: none;
         color: #fff;
@@ -288,7 +288,7 @@
         justify-content: center;
         width: 34px;
         height: 34px;
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
         background: rgba(255, 255, 255, 0.18);
         color: #fff;
         flex: 0 0 auto;

apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss

@@ -44,7 +44,7 @@
     padding: 10px 12px;
     border: 1px solid
         color-mix(in srgb, var(--mat-sys-outline) 46%, transparent);
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     background: color-mix(
         in srgb,
         var(--mat-sys-surface-container) 84%,
@@ -80,7 +80,7 @@
 
 .settings-delete-dialog__hint {
     padding: 12px 14px;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     background: color-mix(
         in srgb,
         var(--app-selection-surface) 32%,

apps/web/src/app/settings/settings.component.scss

@@ -285,7 +285,7 @@
     );
     border: 1px solid
         color-mix(in srgb, var(--mat-sys-outline-variant) 60%, transparent);
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
 }
 
 .theme-switcher__option {
@@ -501,7 +501,7 @@
     padding: 12px 14px;
     border: 1px solid
         color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent);
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     background: color-mix(
         in srgb,
         var(--mat-sys-surface-container-low) 88%,
@@ -550,7 +550,7 @@
     justify-content: center;
     width: 40px;
     height: 40px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: color-mix(
         in srgb,
         var(--mat-sys-surface-container-high) 82%,
@@ -623,7 +623,7 @@
 .settings-note {
     margin: 12px 18px 18px;
     padding: 10px 12px;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     font-size: 0.84rem;
     background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
     border: 1px solid
@@ -642,7 +642,7 @@
     padding: 14px 16px;
     background: var(--settings-item-danger-bg);
     border: 1px solid var(--settings-item-danger-border);
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     grid-template-columns: 1fr;
     gap: 14px;
 }
@@ -672,7 +672,7 @@
     gap: 8px;
     min-height: 34px;
     padding: 4px 6px 4px 12px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: color-mix(
         in srgb,
         var(--mat-sys-surface-container-high) 78%,
@@ -704,7 +704,7 @@
         min-width: 26px;
         height: 22px;
         padding: 0 8px;
-        border-radius: 999px;
+        border-radius: var(--app-radius-pill);
         background: color-mix(
             in srgb,
             var(--mat-sys-on-surface) 10%,
@@ -773,7 +773,7 @@
     margin-top: 12px;
     margin-bottom: 2px;
     box-shadow: none;
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     padding: 12px;
     border-top: 1px solid var(--settings-action-bar-border);
     justify-content: space-between;
@@ -787,7 +787,7 @@
     color: var(--app-selection-on-color, #fff);
     font-weight: 500;
     padding: 0 20px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     box-shadow: 0 4px 14px
         color-mix(in srgb, var(--app-selection-color) 28%, transparent);
     transition:
@@ -835,7 +835,7 @@
 
     .settings-page-header {
         padding: 12px 14px;
-        border-radius: 16px;
+        border-radius: var(--app-radius-xl);
     }
 
     .setting-item {
@@ -883,7 +883,7 @@
         position: static;
         flex-direction: column-reverse;
         align-items: stretch;
-        border-radius: 16px;
+        border-radius: var(--app-radius-xl);
         box-shadow: none;
         width: 100%;
         margin-left: 0;

apps/web/src/m3-theme.scss

@@ -53,6 +53,17 @@ $dark-theme: mat.define-theme(
 html {
     @include mat.all-component-themes($light-theme);
 
+    // ── Shape scale (theme-independent) ───────────────────────────────────
+    // Central radius tokens so surfaces, list rows, inputs and the future
+    // advanced player control panel share one consistent rounding language.
+    --app-radius-xs: 6px;
+    --app-radius-sm: 8px;
+    --app-radius-md: 10px;
+    --app-radius-lg: 12px;
+    --app-radius-xl: 16px;
+    --app-radius-2xl: 20px;
+    --app-radius-pill: 999px;
+
     // ── Light theme design tokens ─────────────────────────────────────────
     --app-shell-bg: #eef0f3;
     --app-rail-bg: #eef0f3;
@@ -92,6 +103,12 @@ html {
     // Content area
     --app-content-shadow: -2px 4px 12px rgba(0, 0, 0, 0.06);
 
+    // Soft elevation scale — modern, low-contrast shadows for cards & panels
+    --app-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04),
+        0 4px 12px rgba(0, 0, 0, 0.05);
+    --app-shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.06),
+        0 6px 16px -8px rgba(0, 0, 0, 0.16);
+
     // Widget surfaces — no borders, layered backgrounds
     --app-widget-bg: #ffffff;
     --app-widget-header-bg: #fafbfc;
@@ -167,6 +184,12 @@ html {
         // Content area
         --app-content-shadow: -4px 8px 20px rgba(0, 0, 0, 0.18);
 
+        // Soft elevation scale — deeper on dark graphite surfaces
+        --app-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25),
+            0 6px 16px rgba(0, 0, 0, 0.28);
+        --app-shadow-raised: 0 3px 8px rgba(0, 0, 0, 0.32),
+            0 10px 24px -10px rgba(0, 0, 0, 0.5);
+
         // Widget surfaces — NO border, surface contrast does the work
         // Widgets sit on content-bg (#161a22), so widget-bg is notably lighter
         --app-widget-bg: #1e2330;
@@ -213,7 +236,7 @@ html {
         --mdc-outlined-text-field-outline-color: var(--app-widget-header-border);
         --mdc-outlined-text-field-hover-outline-color: var(--app-muted-color);
         --mdc-outlined-text-field-focus-outline-color: var(--app-selection-color);
-        --mdc-outlined-text-field-container-shape: 10px;
+        --mdc-outlined-text-field-container-shape: var(--app-radius-md);
         --mdc-outlined-text-field-label-text-color: var(--app-muted-color);
         --mdc-outlined-text-field-input-text-color: var(--app-heading-color);
         --mdc-outlined-text-field-caret-color: var(--app-selection-color);
@@ -227,7 +250,7 @@ html {
     // locked to the light-mode value at html-level inheritance.
     .mat-form-field-appearance-outline .mat-mdc-text-field-wrapper {
         background: color-mix(in srgb, var(--app-widget-bg) 85%, white 7%);
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
     }
 
     .mat-mdc-form-field .mat-mdc-input-element,

apps/web/src/nav-list.scss

@@ -16,7 +16,7 @@
     gap: 10px;
     padding: 6px 4px;
     border: 1px solid transparent;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     background: transparent;
     color: var(--mat-sys-on-surface-variant);
     text-align: left;
@@ -95,7 +95,7 @@
             top: 7px;
             bottom: 7px;
             width: 2px;
-            border-radius: 999px;
+            border-radius: var(--app-radius-pill);
             background: var(--app-selection-color);
             box-shadow: 0 0 10px var(--app-selection-glow);
         } */

apps/web/src/styles.scss

@@ -58,7 +58,7 @@
             var(--app-muted-color) 70%,
             transparent
         );
-        border-radius: 999px;
+        border-radius: var(--app-radius-pill);
         border: 2px solid transparent;
         background-clip: content-box;
         min-height: 32px;
@@ -83,7 +83,7 @@
     color: var(--app-muted-color, #8891a4);
     font-variant-numeric: tabular-nums;
     padding: 2px 8px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: color-mix(
         in srgb,
         var(--app-muted-color, #8891a4) 18%,
@@ -172,7 +172,7 @@ textarea,
 
     ::-webkit-scrollbar-thumb {
         background-color: var(--mat-sys-outline-variant);
-        border-radius: 999px;
+        border-radius: var(--app-radius-pill);
 
         &:hover {
             background-color: var(--mat-sys-outline);
@@ -199,7 +199,7 @@ textarea,
 .workspace-command-palette-overlay .mat-mdc-dialog-surface {
     background: transparent;
     box-shadow: none;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     padding: 0;
     overflow: visible;
 }
@@ -213,7 +213,7 @@ textarea,
 .workspace-shortcuts-overlay .mat-mdc-dialog-surface {
     background: transparent;
     box-shadow: none;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     padding: 0;
     overflow: visible;
 }

libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss

@@ -65,7 +65,7 @@
     appearance: none;
     background: var(--apd-segment-track);
     border: 1px solid var(--apd-border);
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     padding: 10px 11px 12px;
     display: flex;
     flex-direction: column;
@@ -130,7 +130,7 @@
     height: 32px;
     display: grid;
     place-items: center;
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     background: color-mix(
         in srgb,
         var(--apd-surface-raised) 75%,
@@ -210,7 +210,7 @@
     .cors-note {
         margin: 6px 0 0;
         padding: 10px 12px;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         background: color-mix(
             in srgb,
             var(--apd-surface-raised) 50%,

libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss

@@ -15,7 +15,7 @@
     justify-content: center;
     gap: 8px;
     padding: 36px 24px 28px;
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     border: 1.5px dashed
         color-mix(in srgb, var(--app-body-color) 30%, transparent);
     background: color-mix(in srgb, var(--app-shell-bg) 55%, transparent);
@@ -111,7 +111,7 @@
     align-items: center;
     gap: 12px;
     padding: 14px 14px 14px 16px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: color-mix(in srgb, var(--app-shell-bg) 85%, transparent);
     box-shadow: inset 0 0 0 1px var(--app-widget-header-border);
 
@@ -122,7 +122,7 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
         background: color-mix(
             in srgb,
             var(--app-selection-color) 16%,
@@ -166,7 +166,7 @@
         background: transparent;
         width: 32px;
         height: 32px;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         display: inline-flex;
         align-items: center;
         justify-content: center;

libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss

@@ -85,7 +85,7 @@
     min-width: 120px;
     padding: 2rem 3rem;
     border: 2px solid rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     background: rgba(0, 0, 0, 0.85);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
     color: #fff;