manual improvement 1

client/src/theme/theme.ts

@@ -49,7 +49,7 @@ function createAppTheme(direction: 'ltr' | 'rtl') {
     },
     defaultColorScheme: 'light',
     typography: direction === 'rtl' ? TYPOGRAPHY_RTL : TYPOGRAPHY_LTR,
-    shape: { borderRadius: 10 }, // house radius — mirrors --bal-radius-md
+    shape: { borderRadius: 8 }, // house radius — mirrors --bal-radius-md
     direction,
     shadows: TEAL_SHADOWS,
     components: {
@@ -78,6 +78,9 @@ function createAppTheme(direction: 'ltr' | 'rtl') {
           root: {
             backgroundImage: 'none',
             border: '1px solid var(--bal-divider)',
+            // Pinned to the token rather than left to `shape.borderRadius` so a Paper can never
+            // drift past the house step — the whole point of the mobile-pass radius tightening.
+            borderRadius: 'var(--bal-radius-md)',
           },
         },
       },

client/src/theme/tokens.css

@@ -39,10 +39,16 @@
 /* ── Scheme-independent tokens (radius scale, motion) ──────────────────── */
 :root {
   /* Radius scale — controls / cards / dialogs. shape.borderRadius (theme.ts)
-     mirrors --bal-radius-md; never invent a radius per component. */
-  --bal-radius-sm: 4px;
-  --bal-radius-md: 10px;
-  --bal-radius-lg: 16px;
+     mirrors --bal-radius-md; never invent a radius per component.
+     Tightened in the mobile pass: at a 480px frame width the old 10/16 steps read
+     as pill-soft rather than crisp, and any `sx={{ borderRadius: n }}` multiplies
+     the md step — which is how the login card ended up at 30px. */
+  --bal-radius-sm: 6px;
+  --bal-radius-md: 8px;
+  --bal-radius-lg: 12px;
+  /* Fully-rounded ends. For a shape that IS a pill (the floating bottom nav, a
+     segmented control), never for a card — a card wants a step of the scale above. */
+  --bal-radius-pill: 999px;
 
   /* Motion — durations + easing, consumed by the phase-12 motion pass */
   --bal-motion-fast: 120ms;
@@ -88,6 +94,10 @@
   /* Surfaces */
   --bal-bg-default: #faf9f5;
   --bal-bg-paper:   #ffffff;
+  /* The canvas AppFrame paints outside the phone-width app column (layout/AppFrame.tsx).
+     Never a surface a component draws on — one step deeper than bg-default so the frame
+     reads as the app and the rest of a wide window reads as backdrop. */
+  --bal-frame-canvas: #ebe8de;
 
   /* Text */
   --bal-text-primary:   #1b2521;
@@ -174,6 +184,7 @@
 
     --bal-bg-default: #0f1c19;
     --bal-bg-paper:   #16302a;
+    --bal-frame-canvas: #07100e;
 
     --bal-text-primary:   #f3efe9;
     --bal-text-secondary: #9fb0a9;
@@ -244,6 +255,7 @@
   /* Surfaces — deep teal */
   --bal-bg-default: #0f1c19;
   --bal-bg-paper:   #16302a;
+  --bal-frame-canvas: #07100e;
 
   /* Text */
   --bal-text-primary:   #f3efe9;