/* ============================================================================
   Kindred — tokens.css
   Design tokens: colour, type, space, radius, shadow, motion, layout.

   WHERE THE COLOURS COME FROM
   The palette is built from the stress-and-attention research rather than from
   taste alone. Four findings did most of the work:

   1. Saturation matters more than hue. A 2017 study found that bright,
      saturated colour raises physiological arousal regardless of which hue it
      is. So every colour here is softened to the most muted version that still
      passes WCAG AA — nothing in this file is vivid on purpose.
   2. Blue is the best-evidenced calming hue and green the most restorative
      (the biophilic response); warm neutrals and muted peach "give emotional
      lightness without overstimulation". The default palette is therefore warm,
      with eucalyptus green as the grounding second colour.
   3. Blue light late in the evening lifts cortisol, which is why the dark theme
      is genuinely warm — lamplight, not a neutral charcoal. Warm light is also
      the cue people already read as winding down: firelight, a low lamp, home.
   4. Dark-mode comfort: never pure black (#1E1915 here), never pure white text
      (#E5E2DF), and brand colours desaturated for dark surfaces.

   THEMES
     [data-theme]      light (default) | dark | calm         — surface & contrast
     [data-palette]    lamplight (default) | quietude | dusk — hue character
     [data-base-theme] light | dark                          — what "calm" sits on

   Palettes: "Lamplight" (warm clay + eucalyptus, the default), "Quietude"
   (sage with a whisper of blue — cool, neutral, quieter) and "Dusk" (soft
   slate blue — for anyone who finds warmth overstimulating). Every text and
   background pair each of them can produce was checked for WCAG AA.
   ========================================================================== */

:root {
  /* ---- Brand scale: warm linen and clay, not a hospital ------------------ */
  --c-cream-50:  #FBF6F0;
  --c-cream-100: #F6F1EA;
  --c-cream-200: #EFE7DC;
  --c-cream-300: #E4D8C9;

  --c-coral-300: #DBAF9C;   /* named for compatibility; this is muted clay */
  --c-coral-400: #C08E75;
  --c-coral-500: #9E573E;   /* primary */
  --c-coral-600: #7D4531;
  --c-coral-700: #633527;

  --c-teal-300:  #A9C6B7;
  --c-teal-500:  #3A755C;   /* secondary — eucalyptus */
  --c-teal-600:  #2B5644;
  --c-teal-700:  #20402F;

  --c-lav-300:   #C6B7DA;
  --c-lav-500:   #7E59A9;   /* accent — soft mauve */
  --c-lav-600:   #68488C;

  --c-sage-500:  #3A764E;   /* success */
  --c-sage-600:  #2B573A;
  --c-amber-500: #86642A;   /* warning — honey, never a shouty yellow */
  --c-amber-600: #634A1F;
  --c-rose-500:  #AC4A57;   /* error — dusty rose, never an alarm red */
  --c-rose-600:  #8C3C47;

  --c-ink-900: #322D29;
  --c-ink-800: #3B3530;
  --c-ink-700: #4E4841;
  --c-ink-600: #5D5650;
  --c-ink-500: #6A635B;
  --c-ink-400: #8B837A;
  --c-ink-300: #B9B1A7;
  --c-ink-200: #D8CFC4;

  /* ---- Semantic tokens — Lamplight, light (the default) ------------------ */
  --bg:            #F6F1EA;
  --bg-grad:       radial-gradient(1100px 620px at 12% -12%, #FBEBDD 0%, transparent 62%),
                   linear-gradient(180deg, #FBF6F0, #F6F1EA 55%, #F1EAE0);
  --surface:       #FFFCF8;
  --surface-2:     #FBF6F0;
  --surface-3:     #EFE7DC;
  --surface-glass: rgba(255, 252, 248, 0.86);
  --border:        #EAE0D4;
  --border-strong: #D3C4B4;

  --text:            #322D29;
  --text-soft:       #4E4841;
  --text-muted:      #6A635B;
  --text-on-brand:   #FFFFFF;

  --primary:          #9E573E;
  --primary-strong:   #7D4531;
  --primary-soft:     #F2E7E0;
  --secondary:        #3A755C;
  --secondary-strong: #2B5644;
  --secondary-soft:   #E5EAE4;
  --accent:           #7E59A9;
  --accent-soft:      #EEE7EE;
  --success:          #3A764E;
  --success-strong:   #2B573A;
  --success-soft:     #E5EBE2;
  --warning:          #86642A;
  --warning-strong:   #634A1F;
  --warning-soft:     #EFE8DD;
  --danger:           #AC4A57;
  --danger-strong:    #8C3C47;
  --danger-soft:      #F4E5E3;

  --focus-ring: 0 0 0 3px rgba(158, 87, 62, 0.30);
  --shadow-xs:  0 1px 2px rgba(74, 50, 32, 0.05);
  --shadow-sm:  0 2px 6px rgba(74, 50, 32, 0.06);
  --shadow-md:  0 8px 20px rgba(74, 50, 32, 0.08);
  --shadow-lg:  0 18px 44px rgba(74, 50, 32, 0.11);
  --shadow-pop: 0 12px 32px rgba(74, 50, 32, 0.16);

  /* ---- Type -------------------------------------------------------------- */
  /* A rounded stack for warmth, then whatever the device already has. Nothing
     is downloaded, so this costs no bandwidth and no privacy. */
  --font-sans: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Segoe UI Variable",
               "Segoe UI", Nunito, "Quicksand", system-ui, -apple-system, "Helvetica Neue",
               Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.8125rem;  /* 13 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1rem;       /* 16 — never smaller for body */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.3125rem;  /* 21 */
  --fs-xl:   1.625rem;   /* 26 */
  --fs-2xl:  2rem;       /* 32 */
  --fs-3xl:  clamp(2.25rem, 7vw, 3.25rem);

  --lh-tight: 1.2;
  --lh-body:  1.6;        /* generous: cramped text tires the eye at any contrast */
  --fw-regular: 400;
  --fw-medium:  550;
  --fw-bold:    700;
  --tracking-wide: 0.02em;

  /* ---- Space / radius / motion ------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px;

  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 30px; --r-pill: 999px;

  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 340ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ------------------------------------------------------------ */
  --tap: 44px;                 /* minimum tap target */
  --shell-max: 1180px;
  --header-h: 60px;
  --tabbar-h: 62px;
  --sidebar-w: 248px;

  /* Text size is user-controllable in Settings → Appearance */
  --root-scale: 1;
}

/* --------------------------------------------------------------------------
   Dark — warm espresso and candlelight. Never pure black, never pure white.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg:            #1E1915;
  --bg-grad:       radial-gradient(1100px 620px at 10% -12%, #3A2B21 0%, transparent 62%),
                   linear-gradient(180deg, #221C17, #1E1915 60%, #1A1613);
  --surface:       #2A231C;
  --surface-2:     #221C17;
  --surface-3:     #352C24;
  --surface-glass: rgba(42, 35, 28, 0.88);
  --border:        #3B3128;
  --border-strong: #544639;

  --text:            #E5E2DF;
  --text-soft:       #BFBAB3;
  --text-muted:      #9C958B;
  --text-on-brand:   #35231D;

  --primary:          #C08069;
  --primary-strong:   #D7AE9F;
  --primary-soft:     #48362B;
  --secondary:        #539E7E;
  --secondary-strong: #81BDA3;
  --secondary-soft:   #323C30;
  --accent:           #9F85BC;
  --accent-soft:      #41373C;
  --success:          #539F6C;
  --success-strong:   #81BD95;
  --success-soft:     #323C2C;
  --warning:          #B3883F;
  --warning-strong:   #CDAB71;
  --warning-soft:     #453723;
  --danger:           #C27C85;
  --danger-strong:    #DAB0B6;
  --danger-soft:      #483531;

  --focus-ring: 0 0 0 3px rgba(192, 128, 105, 0.38);
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.26);
  --shadow-md:  0 10px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg:  0 20px 48px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.48);

  /* Raw brand primitives follow the palette, so call sites that reference them
     directly (badges, mood colours, status dots) still work on a dark surface.
     No cycles: every semantic token above is a literal in this block. */
  --c-cream-50: var(--surface-2);   --c-cream-100: var(--surface-2);
  --c-cream-200: var(--surface-3);  --c-cream-300: var(--surface-3);
  --c-coral-300: var(--primary-strong); --c-coral-400: var(--primary);
  --c-coral-500: var(--primary);    --c-coral-600: var(--primary-strong);
  --c-coral-700: var(--primary-strong);
  --c-teal-300: var(--secondary-strong); --c-teal-500: var(--secondary);
  --c-teal-600: var(--secondary-strong); --c-teal-700: var(--secondary-strong);
  --c-lav-300: var(--accent); --c-lav-500: var(--accent); --c-lav-600: var(--accent);
  --c-sage-500: var(--success); --c-sage-600: var(--success-strong);
  --c-amber-500: var(--warning); --c-amber-600: var(--warning-strong);
  --c-rose-500: var(--danger); --c-rose-600: var(--danger-strong);
  --c-ink-900: var(--text); --c-ink-800: var(--text);
  --c-ink-700: var(--text-soft); --c-ink-600: var(--text-soft);
  --c-ink-500: var(--text-muted); --c-ink-400: var(--text-muted);
  --c-ink-300: var(--border-strong); --c-ink-200: var(--border);
}

/* ==========================================================================
   ALTERNATIVE PALETTES
   The same structure with different light in the room. Each is defined for
   both modes and passes AA against both --bg and --surface.
   ========================================================================== */

/* Quietude — sage with a whisper of blue. Cool, grounded, very low arousal. */
[data-palette="quietude"] {
  --bg:            #F3F4EF;
  --bg-grad:       radial-gradient(1100px 620px at 12% -12%, #EDF1E9 0%, transparent 62%),
                   linear-gradient(180deg, #F7F8F3, #F3F4EF 55%, #EDEFE8);
  --surface:       #FBFCF9;
  --surface-2:     #F7F8F3;
  --surface-3:     #EAEDE6;
  --surface-glass: rgba(251, 252, 249, 0.86);
  --border:        #E4E8DE;
  --border-strong: #CBD2C4;

  --text:            #332F2A;
  --text-soft:       #4F4942;
  --text-muted:      #6B655B;
  --text-on-brand:   #FFFFFF;

  --primary:          #2F7856;
  --primary-strong:   #22573E;
  --primary-soft:     #E0EBE4;
  --secondary:        #476F90;
  --secondary-strong: #385771;
  --secondary-soft:   #E4EAEB;
  --accent:           #8D6148;
  --accent-soft:      #EDE8E2;
  --success:          #3B774F;
  --success-strong:   #2C583B;
  --success-soft:     #E2EBE3;
  --warning:          #87652B;
  --warning-strong:   #644B20;
  --warning-soft:     #ECE8DE;
  --danger:           #AF4B52;
  --danger-strong:    #8F3D43;
  --danger-soft:      #F1E5E3;

  --focus-ring: 0 0 0 3px rgba(70, 122, 92, 0.28);
  --shadow-xs:  0 1px 2px rgba(48, 56, 48, 0.05);
  --shadow-sm:  0 2px 6px rgba(48, 56, 48, 0.06);
  --shadow-md:  0 8px 20px rgba(48, 56, 48, 0.08);
  --shadow-lg:  0 18px 44px rgba(48, 56, 48, 0.11);
  --shadow-pop: 0 12px 32px rgba(48, 56, 48, 0.16);
}
[data-palette="quietude"][data-theme="dark"] {
  --bg:            #1B211E;
  --bg-grad:       radial-gradient(1100px 620px at 10% -12%, #23302A 0%, transparent 62%),
                   linear-gradient(180deg, #1F2622, #1B211E 60%, #181D1A);
  --surface:       #242C28;
  --surface-2:     #1E2421;
  --surface-3:     #2E3833;
  --surface-glass: rgba(36, 44, 40, 0.88);
  --border:        #313A34;
  --border-strong: #48544C;

  --text:            #EDEBE9;
  --text-soft:       #C6C1BB;
  --text-muted:      #A29B91;
  --text-on-brand:   #1B3228;

  --primary:          #47A77A;
  --primary-strong:   #76C5A0;
  --primary-soft:     #2B4538;
  --secondary:        #769AB7;
  --secondary-strong: #A8BFD1;
  --secondary-soft:   #344245;
  --accent:           #B58D77;
  --accent-soft:      #413F38;
  --success:          #57A671;
  --success-strong:   #89C19B;
  --success-soft:     #2E4437;
  --warning:          #BB8E42;
  --warning-strong:   #D0B07A;
  --warning-soft:     #42402D;
  --danger:           #C68488;
  --danger-strong:    #DEB8BB;
  --danger-soft:      #443E3B;

  --focus-ring: 0 0 0 3px rgba(110, 168, 138, 0.34);
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.26);
  --shadow-md:  0 10px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg:  0 20px 48px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.48);

  --c-cream-50: var(--surface-2); --c-cream-100: var(--surface-2);
  --c-cream-200: var(--surface-3); --c-cream-300: var(--surface-3);
  --c-coral-300: var(--primary-strong); --c-coral-400: var(--primary);
  --c-coral-500: var(--primary); --c-coral-600: var(--primary-strong); --c-coral-700: var(--primary-strong);
  --c-teal-300: var(--secondary-strong); --c-teal-500: var(--secondary);
  --c-teal-600: var(--secondary-strong); --c-teal-700: var(--secondary-strong);
  --c-lav-300: var(--accent); --c-lav-500: var(--accent); --c-lav-600: var(--accent);
  --c-sage-500: var(--success); --c-sage-600: var(--success-strong);
  --c-amber-500: var(--warning); --c-amber-600: var(--warning-strong);
  --c-rose-500: var(--danger); --c-rose-600: var(--danger-strong);
  --c-ink-900: var(--text); --c-ink-800: var(--text);
  --c-ink-700: var(--text-soft); --c-ink-600: var(--text-soft);
  --c-ink-500: var(--text-muted); --c-ink-400: var(--text-muted);
  --c-ink-300: var(--border-strong); --c-ink-200: var(--border);
}

/* Dusk — soft slate blue. For anyone who finds warmth overstimulating. */
[data-palette="dusk"] {
  --bg:            #F3F4F7;
  --bg-grad:       radial-gradient(1100px 620px at 12% -12%, #EAEEF5 0%, transparent 62%),
                   linear-gradient(180deg, #F7F8FA, #F3F4F7 55%, #ECEFF3);
  --surface:       #FBFBFD;
  --surface-2:     #F7F8FA;
  --surface-3:     #E9EBEF;
  --surface-glass: rgba(251, 251, 253, 0.86);
  --border:        #E5E8EE;
  --border-strong: #CDD3DC;

  --text:            #342F2B;
  --text-soft:       #4F4942;
  --text-muted:      #6C655C;
  --text-on-brand:   #FFFFFF;

  --primary:          #406EA3;
  --primary-strong:   #335882;
  --primary-soft:     #E3E9F1;
  --secondary:        #3A7569;
  --secondary-strong: #2B564D;
  --secondary-soft:   #E2EAEA;
  --accent:           #A25461;
  --accent-soft:      #EFE5E9;
  --success:          #3B7759;
  --success-strong:   #2C5842;
  --success-soft:     #E2EAE8;
  --warning:          #87652B;
  --warning-strong:   #644B20;
  --warning-soft:     #ECE8E2;
  --danger:           #B04B52;
  --danger-strong:    #903D43;
  --danger-soft:      #F1E4E7;

  --focus-ring: 0 0 0 3px rgba(74, 116, 172, 0.28);
  --shadow-xs:  0 1px 2px rgba(38, 46, 60, 0.05);
  --shadow-sm:  0 2px 6px rgba(38, 46, 60, 0.06);
  --shadow-md:  0 8px 20px rgba(38, 46, 60, 0.08);
  --shadow-lg:  0 18px 44px rgba(38, 46, 60, 0.11);
  --shadow-pop: 0 12px 32px rgba(38, 46, 60, 0.16);
}
[data-palette="dusk"][data-theme="dark"] {
  --bg:            #1A1F26;
  --bg-grad:       radial-gradient(1100px 620px at 10% -12%, #222C39 0%, transparent 62%),
                   linear-gradient(180deg, #1E242C, #1A1F26 60%, #171B21);
  --surface:       #232A33;
  --surface-2:     #1D232B;
  --surface-3:     #2C343E;
  --surface-glass: rgba(35, 42, 51, 0.88);
  --border:        #2F3843;
  --border-strong: #45505D;

  --text:            #ECEAE7;
  --text-soft:       #C5C0BA;
  --text-muted:      #A19A91;
  --text-on-brand:   #202D3C;

  --primary:          #7298C3;
  --primary-strong:   #A8BFDA;
  --primary-soft:     #334050;
  --secondary:        #55A292;
  --secondary-strong: #85BFB3;
  --secondary-soft:   #2D4246;
  --accent:           #BD868F;
  --accent-soft:      #423C45;
  --success:          #56A47D;
  --success-strong:   #87C0A3;
  --success-soft:     #2D4242;
  --warning:          #BA8E42;
  --warning-strong:   #CFB079;
  --warning-soft:     #413E36;
  --danger:           #C68387;
  --danger-strong:    #DEB7BA;
  --danger-soft:      #443C44;

  --focus-ring: 0 0 0 3px rgba(122, 156, 200, 0.34);
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.26);
  --shadow-md:  0 10px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg:  0 20px 48px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.48);

  --c-cream-50: var(--surface-2); --c-cream-100: var(--surface-2);
  --c-cream-200: var(--surface-3); --c-cream-300: var(--surface-3);
  --c-coral-300: var(--primary-strong); --c-coral-400: var(--primary);
  --c-coral-500: var(--primary); --c-coral-600: var(--primary-strong); --c-coral-700: var(--primary-strong);
  --c-teal-300: var(--secondary-strong); --c-teal-500: var(--secondary);
  --c-teal-600: var(--secondary-strong); --c-teal-700: var(--secondary-strong);
  --c-lav-300: var(--accent); --c-lav-500: var(--accent); --c-lav-600: var(--accent);
  --c-sage-500: var(--success); --c-sage-600: var(--success-strong);
  --c-amber-500: var(--warning); --c-amber-600: var(--warning-strong);
  --c-rose-500: var(--danger); --c-rose-600: var(--danger-strong);
  --c-ink-900: var(--text); --c-ink-800: var(--text);
  --c-ink-700: var(--text-soft); --c-ink-600: var(--text-soft);
  --c-ink-500: var(--text-muted); --c-ink-400: var(--text-muted);
  --c-ink-300: var(--border-strong); --c-ink-200: var(--border);
}

/* ==========================================================================
   LOW-STIMULATION ("calm")
   The same neutrals with the colour most of the way down, no gradients, no
   shadows. For people who find a busy screen draining. Sits on top of light or
   dark, and on top of any palette — it is the quietest room in the house.
   ========================================================================== */
html[data-theme="calm"] {
  --bg:            #F5F2EE;
  --bg-grad:       none;
  --surface:       #FDFBF9;
  --surface-2:     #F7F4F1;
  --surface-3:     #EDE9E4;
  --surface-glass: rgba(253, 251, 249, 0.94);
  --border:        #E6E1DA;
  --border-strong: #D2CCC3;

  --text:            #332E2A;
  --text-soft:       #4E4841;
  --text-muted:      #6B645B;
  --text-on-brand:   #FFFFFF;

  --primary:          #86634F;
  --primary-strong:   #694E3E;
  --primary-soft:     #EEE7E3;
  --secondary:        #4C716A;
  --secondary-strong: #3A5650;
  --secondary-soft:   #E6E9E6;
  --accent:           #76628E;
  --accent-soft:      #EBE7EB;
  --success:          #4D735A;
  --success-strong:   #3B5844;
  --success-soft:     #E6E9E4;
  --warning:          #7C6743;
  --warning-strong:   #5E4E33;
  --warning-soft:     #ECE8E1;
  --danger:           #935B5F;
  --danger-strong:    #77494D;
  --danger-soft:      #EFE6E5;

  --focus-ring: 0 0 0 3px rgba(120, 103, 92, 0.30);
  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
  --shadow-pop: none;
}
html[data-theme="calm"][data-base-theme="dark"] {
  --bg:            #1E1C1A;
  --bg-grad:       none;
  --surface:       #282520;
  --surface-2:     #221F1C;
  --surface-3:     #302C27;
  --surface-glass: rgba(40, 37, 32, 0.94);
  --border:        #37342E;
  --border-strong: #4C4840;

  --text:            #E6E4E1;
  --text-soft:       #C0BBB4;
  --text-muted:      #9D968C;
  --text-on-brand:   #35251C;

  --primary:          #AD8974;
  --primary-strong:   #C9B2A4;
  --primary-soft:     #433931;
  --secondary:        #689A90;
  --secondary-strong: #96B9B2;
  --secondary-soft:   #353C36;
  --accent:           #9B8AAE;
  --accent-soft:      #3F393C;
  --success:          #6B9C7B;
  --success-strong:   #99BBA4;
  --success-soft:     #353D32;
  --warning:          #A88D5D;
  --warning-strong:   #C3B08F;
  --warning-soft:     #423A2C;
  --danger:           #B38588;
  --danger-strong:    #D0B4B6;
  --danger-soft:      #443835;

  --focus-ring: 0 0 0 3px rgba(173, 137, 116, 0.34);
  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
  --shadow-pop: none;
}

/* Text-size preference (Settings → Appearance) */
html[data-textsize="large"] { --root-scale: 1.12; }
html[data-textsize="xlarge"] { --root-scale: 1.24; }
html { font-size: calc(100% * var(--root-scale)); }

/* Reduced motion: honour the OS *and* the in-app setting */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
html[data-motion="reduced"] * {
  animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important;
}

/* ============================================================================
   Alias tokens
   The page stylesheets (home / find / chat / groups / thoughts / admin) were
   written against these friendlier names. Mapping them here keeps one source
   of truth in the palette above, and means a theme change updates everything.
   ========================================================================== */
:root {
  --surface-1: var(--surface);
  --line: var(--border);
  --ink: var(--text);
  --ink-soft: var(--text-soft);
  --ink-muted: var(--text-muted);
  --accent-strong: var(--primary-strong);
  --warn-strong: var(--c-amber-600);
  --radius-sm: var(--r-sm, 10px);
  --radius-md: var(--r-md, 16px);
  --radius-lg: var(--r-lg, 22px);
  --shadow-soft: var(--shadow-sm);
  --shadow-strong: var(--shadow-md);
  --tab-h: var(--tabbar-h, 64px);
  --text-scale: 1;
}