/* ============================================================================
   WithRajesh.com - v4 design tokens
   Feature #27. Three tiers, per the Design Tokens CG Format Module model:

     Tier 1  PRIMITIVE  raw, context-free values. Never referenced by a view.
     Tier 2  SEMANTIC   role-based aliases. The ONLY tier a view may use.
     Tier 3  COMPONENT  per-component knobs (shell dimensions, control sizes).

   Brand is unchanged from v3 (orange / Inter / flat). v4 is systemization,
   not a re-brand. What changed and why is recorded inline as CONTRAST notes -
   every ratio below was measured, not estimated.
   ============================================================================ */

/* ============================================================================
   TIER 1 - PRIMITIVE
   Mode-independent. These never change between light and dark; the semantic
   tier picks different primitives per mode.
   ============================================================================ */

:root {
  /* --- Brand ramp (orange) ----------------------------------------------
     v3 used orange-600 (#EA580C) as brand text/fill on white. Measured 3.56:1
     against white: passes 1.4.11 (3:1 non-text) but FAILS 1.4.3 (4.5:1) for
     body-size text and for white button labels. v4 keeps orange-600 as the
     decorative/large-text brand and introduces orange-700 as the accessible
     text/fill brand for light mode.                                         */
  --c-orange-50:  #FFF7ED;
  --c-orange-100: #FFEDD5;
  --c-orange-200: #FED7AA;
  --c-orange-300: #FDBA74;
  --c-orange-400: #FB923C;
  --c-orange-500: #F97316;
  --c-orange-600: #EA580C;   /* 3.56:1 on white - large text / non-text only */
  --c-orange-700: #C2410C;   /* 5.18:1 on white - safe for text and fills    */
  --c-orange-800: #9A3412;
  --c-orange-900: #7C2D12;

  /* Channel triplets for alpha compositing (tints, rings, glows). */
  --c-orange-500-rgb: 249, 115, 22;
  --c-orange-600-rgb: 234, 88, 12;
  --c-orange-700-rgb: 194, 65, 12;

  /* --- Neutral ramp ------------------------------------------------------
     v3 borders (#D4D4D4 light = 1.48:1, #222222 dark = 1.32:1) fail 1.4.11.
     The ramp below adds the mid steps v4 needs for a compliant "strong"
     border without making every decorative divider heavy.                   */
  --c-white:      #FFFFFF;
  --c-neutral-25:  #FCFCFC;
  --c-neutral-50:  #FAFAFA;
  --c-neutral-100: #F5F5F5;
  --c-neutral-200: #E5E5E5;
  --c-neutral-300: #D4D4D4;
  --c-neutral-400: #A3A3A3;
  --c-neutral-450: #8A8A8A;  /* 3.45:1 on white, 3.17:1 on #F5F5F5 - border */
  --c-neutral-500: #737373;  /* 4.74:1 on white only - not surface-safe     */
  --c-neutral-550: #6E6E6E;  /* 4.68:1 on #F5F5F5 - muted text, any surface */
  --c-neutral-600: #525252;
  --c-neutral-700: #404040;
  --c-neutral-750: #333333;
  --c-neutral-800: #262626;
  --c-neutral-850: #1A1A1A;
  --c-neutral-900: #111111;
  --c-neutral-950: #0A0A0A;
  --c-black:       #000000;

  --c-white-rgb:   255, 255, 255;
  --c-black-rgb:   0, 0, 0;

  /* Dark-mode neutrals tuned against a #000000 ground. */
  --c-dark-border:        #2E2E2E;
  --c-dark-border-strong: #6B6B6B;  /* 3.94:1 on black */
  --c-dark-text-muted:    #8A8A8A;  /* 6.08:1 on black */

  /* --- Status ramp -------------------------------------------------------
     v3 had no status tokens at all, which is why the Work module and the
     admin console each invented their own. Light values are the -700 steps
     (>= 5:1 on white); dark values are the -400 steps (>= 7.5:1 on black).  */
  --c-green-50:  #F0FDF4;   --c-green-400:  #4ADE80;   --c-green-700:  #15803D;
  --c-amber-50:  #FFFBEB;   --c-amber-400:  #FBBF24;   --c-amber-700:  #B45309;
  --c-red-50:    #FEF2F2;   --c-red-400:    #F87171;   --c-red-700:    #B91C1C;
  --c-blue-50:   #EFF6FF;   --c-blue-400:   #60A5FA;   --c-blue-700:   #1D4ED8;

  --c-green-400-rgb: 74, 222, 128;
  --c-amber-400-rgb: 251, 191, 36;
  --c-red-400-rgb:   248, 113, 113;
  --c-red-700-rgb:   185, 28, 28;
  --c-blue-400-rgb:  96, 165, 250;

  /* --- Section accents ---------------------------------------------------
     v3 collapsed all eight section accents onto the same orange, so nothing
     distinguished one subdomain from another. v4 keeps orange as the single
     brand and gives each section a distinguishable hue used ONLY for
     wayfinding chrome (rails, chips, icon tiles) - never for primary CTAs.
     Every value is an AA-safe -700 (light) / -400 (dark) pair.              */
  --c-sec-connect-700:    #C2410C;   --c-sec-connect-400:    #FB923C;
  --c-sec-work-700:       #1D4ED8;   --c-sec-work-400:       #60A5FA;
  --c-sec-learn-700:      #6D28D9;   --c-sec-learn-400:      #A78BFA;
  --c-sec-support-700:    #BE123C;   --c-sec-support-400:    #FB7185;
  --c-sec-collaborate-700:#0F766E;   --c-sec-collaborate-400:#2DD4BF;
  --c-sec-invest-700:     #15803D;   --c-sec-invest-400:     #4ADE80;
  --c-sec-build-700:      #B45309;   --c-sec-build-400:      #FBBF24;
  --c-sec-secure-700:     #3F3F46;   --c-sec-secure-400:     #A1A1AA;
  --c-sec-automate-700:   #0369A1;   --c-sec-automate-400:   #38BDF8;

  /* --- Spacing ------------------------------------------------------------
     4px base. v3 had NO spacing scale - all spacing was inline utilities,
     which is the mechanical cause of drift between screens.                 */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /*  2px */
  --space-1:   0.25rem;   /*  4px */
  --space-1-5: 0.375rem;  /*  6px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* --- Typography ---------------------------------------------------------
     Single family (Inter variable, self-hosted). Each size ships with its
     paired line-height so vertical rhythm cannot drift.                     */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  --text-xs:   0.75rem;    --leading-xs:   1.125rem;
  --text-sm:   0.875rem;   --leading-sm:   1.375rem;
  --text-base: 1rem;       --leading-base: 1.625rem;
  --text-lg:   1.125rem;   --leading-lg:   1.75rem;
  --text-xl:   1.25rem;    --leading-xl:   1.875rem;
  --text-2xl:  1.5rem;     --leading-2xl:  2rem;
  --text-3xl:  1.875rem;   --leading-3xl:  2.25rem;
  --text-4xl:  2.25rem;    --leading-4xl:  2.5rem;
  --text-5xl:  3rem;       --leading-5xl:  1.1;
  --text-6xl:  3.75rem;    --leading-6xl:  1.05;
  --text-7xl:  4.5rem;     --leading-7xl:  1;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-eyebrow: 0.24em;
  --tracking-luxe:    0.42em;

  /* Reading measure for long-form content (WCAG-friendly 65-75ch). */
  --measure-prose: 68ch;

  /* --- Radius ------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* --- Border widths ------------------------------------------------------ */
  --border-thin:   1px;
  --border-medium: 2px;
  --border-thick:  3px;

  /* --- Motion -------------------------------------------------------------
     Durations stay short; the flat identity uses motion for feedback, not
     decoration. All of it is disabled under prefers-reduced-motion.         */
  --dur-instant: 75ms;
  --dur-fast:    150ms;
  --dur-normal:  220ms;
  --dur-slow:    320ms;
  --dur-slower:  500ms;

  --ease-standard:  cubic-bezier(0.2, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* --- Z-index ------------------------------------------------------------
     One authoritative stack. Nothing in v4 may invent its own z value.      */
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-header:    200;
  --z-sidebar:   300;
  --z-backdrop:  400;
  --z-drawer:    500;
  --z-modal:     600;
  --z-dropdown:  700;
  --z-toast:     800;
  --z-tooltip:   900;
  --z-max:       9999;

  /* --- Layout -------------------------------------------------------------
     Atlassian grid model: fixed-wide default, fixed-narrow for long-form.   */
  --container-narrow: 54rem;   /*  864px - articles, legal, long-form        */
  --container-wide:   81rem;   /* 1296px - default: dashboards, lists, admin */
  --container-full:   100%;    /*           fluid: board views only          */
  --grid-columns:     12;
  --grid-gutter:      var(--space-6);
  --grid-margin:      var(--space-4);

  /* --- Breakpoints (documentation only; media queries cannot read vars) ---
     sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 - aligned to Tailwind 4
     so utilities and tokens never disagree.                                 */
  --bp-sm:  40rem;
  --bp-md:  48rem;
  --bp-lg:  64rem;
  --bp-xl:  80rem;
  --bp-2xl: 96rem;

  /* --- Target sizes (WCAG 2.2 SC 2.5.8) -----------------------------------
     24px is the AA floor; 44px is the comfortable target v4 uses for any
     primary or frequently-hit control.                                      */
  --target-min:     1.5rem;    /* 24px - absolute minimum, AA               */
  --target-comfort: 2.75rem;   /* 44px - primary actions, mobile            */
}

/* ============================================================================
   TIER 2 - SEMANTIC (LIGHT)
   The only tier views may reference. Every token here has a dark counterpart
   below - no dark-mode holes.
   ============================================================================ */

:root {
  color-scheme: light;

  /* --- Backgrounds and surfaces ------------------------------------------ */
  --color-bg-primary:      var(--c-white);
  --color-bg-secondary:    var(--c-neutral-50);
  --color-bg-tertiary:     var(--c-neutral-100);
  --color-bg-inverse:      var(--c-neutral-900);

  --color-surface:         var(--c-white);
  --color-surface-raised:  var(--c-white);
  --color-surface-sunken:  var(--c-neutral-50);
  --color-surface-hover:   var(--c-neutral-50);
  --color-surface-active:  var(--c-neutral-100);
  --color-surface-overlay: var(--c-white);
  --color-surface-glass:   rgba(var(--c-white-rgb), 0.85);
  --color-backdrop:        rgba(var(--c-black-rgb), 0.45);

  /* --- Text ---------------------------------------------------------------
     Measured against the WORST-CASE light surface (--color-bg-tertiary
     #F5F5F5), not just white, because muted text lands on sunken surfaces
     constantly (table headers, sidebars, empty states).
       primary   #111111  17.74:1 on #F5F5F5   AA/AAA
       secondary #525252   7.34:1 on #F5F5F5   AA/AAA
       tertiary  #6E6E6E   4.68:1 on #F5F5F5   AA   (#737373 was 4.35, FAILED)
       muted     #6E6E6E   4.68:1 on #F5F5F5   AA
       brand     #C2410C   5.18:1 on white     AA   (#EA580C was 3.56, FAILED)
       on-brand  #FFFFFF on #C2410C 5.18:1     AA   (on #EA580C was 3.56, FAILED) */
  --color-text-primary:   var(--c-neutral-900);
  --color-text-secondary: var(--c-neutral-600);
  --color-text-tertiary:  var(--c-neutral-550);
  --color-text-muted:     var(--c-neutral-550);
  --color-text-disabled:  var(--c-neutral-400);
  --color-text-brand:     var(--c-orange-700);
  --color-text-on-brand:  var(--c-white);
  --color-text-on-dark:   var(--c-white);
  --color-text-inverse:   var(--c-white);
  --color-text-link:      var(--c-orange-700);
  --color-text-link-hover:var(--c-orange-800);

  /* --- Borders ------------------------------------------------------------
     Two roles, deliberately. SC 1.4.11 requires 3:1 only for boundaries that
     IDENTIFY a control. Decorative dividers are exempt, so darkening them all
     would be visually wrong as well as unnecessary.
       subtle  #E5E5E5  1.26:1  dividers, table rules   (decorative, exempt)
       default #D4D4D4  1.48:1  card edges              (decorative, exempt)
       strong  #8A8A8A  3.45:1  inputs, selects, chips  (REQUIRED >= 3:1)
       focus   #C2410C  5.18:1  focus ring                                   */
  --color-border-subtle:  var(--c-neutral-200);
  --color-border:         var(--c-neutral-300);
  --color-border-hover:   var(--c-neutral-400);
  --color-border-strong:  var(--c-neutral-450);
  --color-border-focus:   var(--c-orange-700);
  --color-border-glass:   rgba(var(--c-black-rgb), 0.09);

  /* --- Brand -------------------------------------------------------------
     -accessible is for text and filled controls; -display is the vivid v3
     orange, permitted ONLY for large display type and non-text decoration.  */
  --color-brand:            var(--c-orange-700);
  --color-brand-hover:      var(--c-orange-800);
  --color-brand-active:     var(--c-orange-900);
  --color-brand-display:    var(--c-orange-600);
  --color-brand-subtle:     var(--c-orange-100);
  --color-brand-subtle-bg:  var(--c-orange-50);
  --color-brand-border:     var(--c-orange-200);
  --color-brand-tint-10:    rgba(var(--c-orange-700-rgb), 0.10);
  --color-brand-tint-20:    rgba(var(--c-orange-700-rgb), 0.20);

  /* Own message bubble. A saturated brand fill across a long thread is
     fatiguing to read, so the bubble is a soft tint with normal body text
     on it. Ownership is still carried by alignment and the sender label. */
  --color-bubble-own-bg:     var(--c-orange-50);
  --color-bubble-own-border: var(--c-orange-200);
  --color-bubble-own-text:   var(--color-text-primary);

  /* --- Status -------------------------------------------------------------
     Never used alone: SC 1.4.1 requires an icon or text label alongside.    */
  --color-status-success-fg:     var(--c-green-700);
  --color-status-success-bg:     var(--c-green-50);
  --color-status-success-border: #86EFAC;
  --color-status-warning-fg:     var(--c-amber-700);
  --color-status-warning-bg:     var(--c-amber-50);
  --color-status-warning-border: #FCD34D;
  --color-status-danger-fg:      var(--c-red-700);
  --color-status-danger-bg:      var(--c-red-50);
  --color-status-danger-border:  #FCA5A5;
  --color-status-info-fg:        var(--c-blue-700);
  --color-status-info-bg:        var(--c-blue-50);
  --color-status-info-border:    #93C5FD;
  --color-status-neutral-fg:     var(--c-neutral-600);
  --color-status-neutral-bg:     var(--c-neutral-100);
  --color-status-neutral-border: var(--c-neutral-300);

  /* --- Elevation ----------------------------------------------------------
     The v4 LOOK stays flat, so surfaces use borders by default. But a data
     console must be able to separate overlay layers, and v3 defined every
     shadow as `none`, leaving no way to do it. These exist for overlays.    */
  --elevation-flat:    none;
  --elevation-raised:  0 1px 2px rgba(var(--c-black-rgb), 0.06);
  --elevation-overlay: 0 4px 12px rgba(var(--c-black-rgb), 0.10);
  --elevation-modal:   0 16px 48px rgba(var(--c-black-rgb), 0.18);
  --color-header-shadow: 0 1px 3px rgba(var(--c-black-rgb), 0.08);

  /* --- Focus ring (SC 2.4.7, 2.4.11, 2.4.13) ----------------------------- */
  --focus-ring-width:  var(--border-medium);
  --focus-ring-color:  var(--color-border-focus);
  --focus-ring-offset: 2px;
  --focus-ring-shadow: 0 0 0 3px var(--color-brand-tint-20);
  --color-status-danger-tint: rgba(var(--c-red-700-rgb), 0.18);

  /* --- Texture ------------------------------------------------------------ */
  --grain-opacity: 0.035;

  /* --- Section accents (wayfinding chrome only) --------------------------- */
  --color-section-connect:     var(--c-sec-connect-700);
  --color-section-work:        var(--c-sec-work-700);
  --color-section-learn:       var(--c-sec-learn-700);
  --color-section-support:     var(--c-sec-support-700);
  --color-section-collaborate: var(--c-sec-collaborate-700);
  --color-section-invest:      var(--c-sec-invest-700);
  --color-section-build:       var(--c-sec-build-700);
  --color-section-secure:      var(--c-sec-secure-700);
  --color-section-automate:    var(--c-sec-automate-700);
}

/* ============================================================================
   TIER 2 - SEMANTIC (DARK)
   ============================================================================ */

.dark {
  color-scheme: dark;

  --color-bg-primary:      var(--c-black);
  --color-bg-secondary:    var(--c-neutral-950);
  --color-bg-tertiary:     var(--c-neutral-900);
  --color-bg-inverse:      var(--c-white);

  --color-surface:         var(--c-neutral-900);
  --color-surface-raised:  var(--c-neutral-850);
  --color-surface-sunken:  var(--c-neutral-950);
  --color-surface-hover:   var(--c-neutral-850);
  --color-surface-active:  var(--c-neutral-800);
  --color-surface-overlay: var(--c-neutral-850);
  --color-surface-glass:   rgba(17, 17, 17, 0.85);
  --color-backdrop:        rgba(var(--c-black-rgb), 0.7);

  /* CONTRAST (on --color-bg-primary #000000):
       primary   #FFFFFF  21.00:1  AA/AAA
       secondary #D4D4D4  14.17:1  AA/AAA
       tertiary  #8A8A8A   6.08:1  AA          (was #777777 = 4.69:1, marginal)
       muted     #8A8A8A   6.08:1  AA
       brand     #F97316   7.49:1  AA
       on-brand  #000000 on #F97316 7.49:1 AA                                */
  --color-text-primary:   var(--c-white);
  --color-text-secondary: var(--c-neutral-300);
  --color-text-tertiary:  var(--c-dark-text-muted);
  --color-text-muted:     var(--c-dark-text-muted);
  --color-text-disabled:  var(--c-neutral-600);
  --color-text-brand:     var(--c-orange-500);
  --color-text-on-brand:  var(--c-black);
  --color-text-on-dark:   var(--c-white);
  --color-text-inverse:   var(--c-neutral-900);
  --color-text-link:      var(--c-orange-500);
  --color-text-link-hover:var(--c-orange-400);

  /*   subtle  #1A1A1A  decorative      default #2E2E2E  decorative
       strong  #6B6B6B  3.94:1 REQUIRED focus   #F97316  7.49:1              */
  --color-border-subtle:  var(--c-neutral-850);
  --color-border-hover:   var(--c-neutral-700);
  --color-border:         var(--c-dark-border);
  --color-border-strong:  var(--c-dark-border-strong);
  --color-border-focus:   var(--c-orange-500);
  --color-border-glass:   rgba(var(--c-white-rgb), 0.1);

  /* Dark mode needs no separate display brand: orange-500 already clears
     4.5:1 on black, so text and display use the same value.                 */
  --color-brand:            var(--c-orange-500);
  --color-brand-hover:      var(--c-orange-400);
  --color-brand-active:     var(--c-orange-300);
  --color-brand-display:    var(--c-orange-500);
  --color-brand-subtle:     rgba(var(--c-orange-500-rgb), 0.22);
  --color-brand-subtle-bg:  rgba(var(--c-orange-500-rgb), 0.10);
  --color-brand-border:     rgba(var(--c-orange-500-rgb), 0.35);
  --color-brand-tint-10:    rgba(var(--c-orange-500-rgb), 0.10);
  --color-brand-tint-20:    rgba(var(--c-orange-500-rgb), 0.20);

  --color-bubble-own-bg:     rgba(var(--c-orange-500-rgb), 0.12);
  --color-bubble-own-border: rgba(var(--c-orange-500-rgb), 0.32);
  --color-bubble-own-text:   var(--color-text-primary);

  --color-status-success-fg:     var(--c-green-400);
  --color-status-success-bg:     rgba(var(--c-green-400-rgb), 0.12);
  --color-status-success-border: rgba(var(--c-green-400-rgb), 0.38);
  --color-status-warning-fg:     var(--c-amber-400);
  --color-status-warning-bg:     rgba(var(--c-amber-400-rgb), 0.12);
  --color-status-warning-border: rgba(var(--c-amber-400-rgb), 0.38);
  --color-status-danger-fg:      var(--c-red-400);
  --color-status-danger-bg:      rgba(var(--c-red-400-rgb), 0.12);
  --color-status-danger-border:  rgba(var(--c-red-400-rgb), 0.38);
  --color-status-info-fg:        var(--c-blue-400);
  --color-status-info-bg:        rgba(var(--c-blue-400-rgb), 0.12);
  --color-status-info-border:    rgba(var(--c-blue-400-rgb), 0.38);
  --color-status-neutral-fg:     var(--c-neutral-300);
  --color-status-neutral-bg:     var(--c-neutral-850);
  --color-status-neutral-border: var(--c-neutral-700);
  --color-status-danger-tint:    rgba(var(--c-red-400-rgb), 0.25);

  --elevation-flat:    none;
  --elevation-raised:  0 1px 2px rgba(var(--c-black-rgb), 0.5);
  --elevation-overlay: 0 4px 12px rgba(var(--c-black-rgb), 0.6);
  --elevation-modal:   0 16px 48px rgba(var(--c-black-rgb), 0.75);
  --color-header-shadow: 0 1px 3px rgba(var(--c-black-rgb), 0.6);

  --focus-ring-shadow: 0 0 0 3px var(--color-brand-tint-20);

  --grain-opacity: 0.05;

  --color-section-connect:     var(--c-sec-connect-400);
  --color-section-work:        var(--c-sec-work-400);
  --color-section-learn:       var(--c-sec-learn-400);
  --color-section-support:     var(--c-sec-support-400);
  --color-section-collaborate: var(--c-sec-collaborate-400);
  --color-section-invest:      var(--c-sec-invest-400);
  --color-section-build:       var(--c-sec-build-400);
  --color-section-secure:      var(--c-sec-secure-400);
  --color-section-automate:    var(--c-sec-automate-400);
}

/* ============================================================================
   TIER 3 - COMPONENT
   Only where a component genuinely needs its own knob. Mode-independent.
   ============================================================================ */

:root {
  /* --- Shell dimensions --------------------------------------------------- */
  --topbar-height:          4rem;      /* 64px - marketing + app shells      */
  --topbar-height-compact:  3.5rem;    /* 56px - console shell               */
  --sidebar-width:          16rem;     /* 256px expanded                     */
  --sidebar-width-collapsed:4rem;      /* 64px icon rail                     */
  --rail-width:             20rem;     /* 320px right rail (feed, activity)  */
  --bottom-nav-height:      3.5rem;    /* mobile app-shell nav               */
  --page-header-height:     4.5rem;    /* console sticky page header         */

  /* --- Controls -----------------------------------------------------------
     Heights honour SC 2.5.8: sm is 32px (>= 24px floor), md/lg are >= 44px
     for primary and touch targets.                                          */
  --control-height-sm: 2rem;      /* 32px */
  --control-height-md: 2.75rem;   /* 44px */
  --control-height-lg: 3.25rem;   /* 52px */

  --control-px-sm: var(--space-4);
  --control-px-md: var(--space-6);
  --control-px-lg: var(--space-8);

  --control-radius:      var(--radius-full);  /* pill buttons - v3 signature */
  --control-radius-form: var(--radius-md);    /* inputs stay rectangular     */

  /* --- Surfaces ----------------------------------------------------------- */
  --card-radius:  var(--radius-lg);
  --card-padding: var(--space-6);
  --modal-radius: var(--radius-lg);
  --modal-width:  32rem;
  --drawer-width: 24rem;
  --toast-width:  22rem;

  /* --- Data table --------------------------------------------------------- */
  --table-row-height:  3.25rem;
  --table-cell-px:     var(--space-4);
  --table-header-bg:   var(--color-bg-secondary);

  /* --- Domain components -------------------------------------------------- */
  --avatar-size-sm: 2rem;
  --avatar-size-md: 2.5rem;
  --avatar-size-lg: 4rem;
  --avatar-size-xl: 6rem;
  --message-bubble-max: 34rem;
  --composer-min-height: 3rem;
  --post-card-max: 40rem;
}

/* ============================================================================
   Reduced motion (SC 2.3.3) - collapse every duration at the token level so
   no component has to remember to opt in.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-normal:  1ms;
    --dur-slow:    1ms;
    --dur-slower:  1ms;
  }
}