/* ===============================================
   DESIGN TOKENS - Atomic Design Foundation
   ===============================================

   Leap refined token set (A3 Design System, 2026-08).
   MERGED, not replaced: every legacy name the codebase consumes is
   kept so no var() ever resolves to nothing. New canonical names
   (--radius-*, --sp-*, --card-shadow, --dur-*) carry the target
   values; legacy radius names keep their OLD values frozen until
   call sites migrate (the spacing/radius split is a follow-up card).

   ORGANIZATION:
   1. COLOR TOKENS - Semantic color system
   2. TYPOGRAPHY TOKENS - Text scales and weights
   3. SPACING TOKENS - Spacing scale for consistent rhythm
   4. SHADOW TOKENS - Elevation system
   5. BORDER TOKENS - Border radius and styles
   6. ANIMATION TOKENS - Timing and easing functions
   7. LAYOUT TOKENS - Grid, breakpoints, containers
   8. SEMANTIC TOKENS - Component-specific tokens
   9. DARK THEME - same names, different values
*/

:root {
  /* ===============================================
     1. COLOR TOKENS - One green, one job
     ===============================================

     Green is for primary actions and selected states. Success and
     primary are deliberately the same green: a healthy state and
     the brand are one signal. Functional colors are low chroma so
     they sit with the beige ground instead of vibrating against it.
  */

  /* Primary Colors - Brand Green */
  --color-primary: #16a34a;              /* Main brand color */
  --color-primary-hover: #15803d;        /* Hover/active state */
  --color-primary-press: #126c34;        /* Pressed state */
  --color-primary-light: rgba(22, 163, 74, 0.10);  /* Tint fills, selected rows (was #dcfce7) */
  --primary-subtle: rgba(22, 163, 74, 0.10);       /* Tint fills, selected nav rows */
  --primary-wash: rgba(22, 163, 74, 0.05);         /* Faint hover/selection wash */

  /* Semantic Colors - Success (collapsed into brand green) */
  --color-success: #16a34a;              /* Main success (was #22c55e) */
  --color-success-hover: #15803d;        /* Hover state / text on tint */
  --color-success-light: rgba(22, 163, 74, 0.10);  /* Backgrounds */

  /* Semantic Colors - Warning (amber, lower chroma) */
  --color-warning: #d99a16;              /* Main warning (was #f59e0b) */
  --color-warning-hover: #8a6209;        /* Hover state / text on tint */
  --color-warning-light: rgba(217, 154, 22, 0.12); /* Backgrounds */

  /* Semantic Colors - Error (warmer red) */
  --color-error: #c0392b;                /* Main error (was #dc2626) */
  --color-error-hover: #a93226;          /* Hover state / text on tint */
  --color-error-light: rgba(192, 57, 43, 0.10);    /* Backgrounds */

  /* Semantic Colors - Info (muted blue) */
  --color-info: #2f6fb0;                 /* Main info (was #3b82f6) */
  --color-info-hover: #2563a0;           /* Hover state / text on tint */
  --color-info-light: rgba(47, 111, 176, 0.10);    /* Backgrounds */

  /* Allergy Guardian - Turquoise (reserved exception, do not extend) */
  --color-guardian: #0d9488;             /* Main teal-600 */
  --color-guardian-hover: #0f766e;       /* Hover teal-700 */
  --color-guardian-light: #f0fdfa;       /* Section background teal-50 */
  --color-guardian-border: #99f6e4;      /* Section border teal-200 */
  --color-guardian-text: #115e59;        /* Heading text teal-800 */

  /* Calendar - Sticky Note (reserved exception, do not extend) */
  --sticky-bg: #fde6b0;                   /* Warm post-it fill */
  --sticky-fold: #f2d488;                 /* Folded-corner shade */
  --sticky-text: #5c4a16;                 /* Warm brown body text */
  --sticky-text-muted: #8a7434;           /* Warm brown footer text */

  /* Neutral Grays - warm stone */
  --color-neutral-100: #fafaf9;          /* Lightest - disabled backgrounds */
  --color-neutral-300: #d6d3d1;          /* Light - borders */
  --color-neutral-400: #a8a29e;          /* Mid-light - muted text */
  --color-neutral-500: #78716c;          /* Mid - secondary text */
  --color-neutral-700: #44403c;          /* Dark - emphasis */
  --color-neutral-800: #292524;          /* Darker - strong text */
  --color-neutral-900: #1c1917;          /* Darkest - primary text */

  /* Background Colors - 4-Layer Beige Ground Ladder
     Never skip a layer. Depth comes from warmth first, shadow second. */
  --bg-layer-1: #ebe9e6;                 /* Layer 1: App background (darkest beige) */
  --bg-layer-2: #f5f4f2;                 /* Layer 2: Workspace/main content (medium beige) */
  --bg-layer-3: #fafaf9;                 /* Layer 3: Panels/sections (light beige) */
  --bg-layer-4: #ffffff;                 /* Layer 4: Cards/inputs (pure white) */

  /* Semantic Aliases for Clear Intent */
  --bg-app: var(--bg-layer-1);           /* App shell background */
  --bg-workspace: var(--bg-layer-2);     /* Main content area */
  --bg-panel: var(--bg-layer-3);         /* Panel/section backgrounds */
  --bg-surface: var(--bg-layer-4);       /* Card/input backgrounds */

  --surface-sunk: #e4e1db;               /* Wells, tab tracks, code blocks */
  --surface-dark: #11150f;               /* Dark ground (dark chrome surfaces) */
  --surface-dark-2: #1a201a;             /* Dark raised surface */

  /* Interaction States */
  --bg-surface-hover: #f5f4f2;           /* Hover on white */
  --bg-surface-active: #f0efed;          /* Active/pressed */
  --bg-muted: var(--bg-layer-3);         /* Disabled/subtle (use panel color) */
  --bg-accent: rgba(22, 163, 74, 0.10);  /* Primary accent backgrounds */

  /* Border Colors - Warm Beige Tones */
  --border-subtle: #e8e7e4;              /* Subtle dividers */
  --border-default: #d8d6d2;             /* Standard borders (was #d4d3d0) */
  --border-strong: #c4c2be;              /* Emphasized borders */
  --border-focus: #16a34a;               /* Focus rings (one green) */

  /* Text Colors - warm ink to match the warm ground */
  --text-primary: #1a1a1a;               /* Darkest - headings, emphasis */
  --text-secondary: #4a4a47;             /* Subheadings, important text (was #2d2d2d) */
  --text-tertiary: #5c5a55;              /* De-emphasized text (was #404040) */
  --text-body: #4a4a47;                  /* Body text - most common (was #525252) */
  --text-muted: #83817b;                 /* Hints, labels, captions (was #737373) */
  --text-light: #a8a6a0;                 /* Lightest - subtle info (was #8a8a8a) */
  --text-disabled: #a8a6a0;              /* Disabled labels */
  --text-inverse: #ffffff;               /* On dark backgrounds */

  /* ===============================================
     2. TYPOGRAPHY TOKENS - Text Scales and Weights
     =============================================== */

  /* Font Families - Inter for product, mono for digits that must
     line up (money, IDs, times, room numbers, counts). Both loaded
     in index.html. */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'Spline Sans Mono', ui-monospace, Menlo, monospace;
  --font-primary: var(--font-family-sans);
  --font-mono: var(--font-family-mono);

  /* Font Sizes - app scale. 14 is the app body default; 13 is table
     cells and captions; 11 is overlines and badges; 16 is panel
     titles (--text-md). */
  --text-2xs: 0.625rem;  /* 10px - Extra small (count pills) */
  --text-xs: 0.6875rem;  /* 11px - Badges, overlines (was 12px) */
  --text-nav: 0.8125rem; /* 13px - Navigation items (now equals --text-sm) */
  --text-sm: 0.8125rem;  /* 13px - Table cells, captions (was 14px) */
  --text-base: 0.875rem; /* 14px - App body default (was 16px) */
  --text-md: 1rem;       /* 16px - Panel titles */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px - Page titles */
  --text-3xl: 1.75rem;   /* 28px - KPI values (was 30px) */
  --text-4xl: 2rem;      /* 32px - Section heads (was 36px) */

  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Letter Spacing - headings above 24px carry negative tracking,
     body never does. Caps tracking for overlines and table headers. */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --tracking-tight: -0.02em;
  --tracking-display: -0.035em;
  --tracking-caps: 0.06em;
  --tracking-nums: -0.03em;

  /* ===============================================
     3. SPACING TOKENS - 4px grid
     ===============================================

     The numbered --space-* scale is the live one. The 9-rung --sp-*
     scale is the target; the spacing split (space-30+ become size
     tokens, call sites migrate to --sp-*) is a separate card.
  */

  --space-0: 0;
  --space-px: 1px;
  --space-0_5: 0.125rem;  /* 2px - Micro gaps */
  --space-1: 0.25rem;     /* 4px - Minimal spacing */
  --space-1_5: 0.375rem;  /* 6px - Tight spacing */
  --space-2: 0.5rem;      /* 8px - Compact spacing */
  --space-2_5: 0.625rem;  /* 10px - Small spacing */
  --space-3: 0.75rem;     /* 12px - Standard spacing */
  --space-3_5: 0.875rem;  /* 14px - Medium-small */
  --space-4: 1rem;        /* 16px - Medium spacing */
  --space-4_5: 1.125rem;  /* 18px - Medium-comfortable */
  --space-5: 1.25rem;     /* 20px - Comfortable spacing */
  --space-6: 1.5rem;      /* 24px - Large spacing */
  --space-7: 1.75rem;     /* 28px - Extra spacing */
  --space-8: 2rem;        /* 32px - Section spacing */
  --space-9: 2.25rem;     /* 36px - Large section */
  --space-10: 2.5rem;     /* 40px - Major spacing */
  --space-11: 2.75rem;    /* 44px - Extra large */
  --space-12: 3rem;       /* 48px - Maximum spacing */
  --space-13: 3.25rem;    /* 52px - Panel headers */
  --space-15: 3.75rem;    /* 60px - Medium-large */
  --space-16: 4rem;       /* 64px - Hero spacing */
  --space-18: 4.5rem;     /* 72px - Large spacing */
  --space-20: 5rem;       /* 80px - Page sections */
  --space-22: 5.5rem;     /* 88px - Extra sections */
  --space-24: 6rem;       /* 96px - Large sections */
  --space-30: 7.5rem;     /* 120px - Form labels */
  --space-32: 8rem;       /* 128px - Page breaks */
  --space-35: 8.75rem;    /* 140px - Medium-large */
  --space-37: 9.375rem;   /* 150px - Filter widths */
  --space-40: 10rem;      /* 160px - Card heights */
  --space-45: 11.25rem;   /* 180px - Large circles */
  --space-50: 12.5rem;    /* 200px - Medium container */
  --space-62: 15.5rem;    /* 248px - Extra wide */
  --space-75: 18.75rem;   /* 300px - Large container */
  --space-96: 24rem;      /* 384px - Maximum width */

  /* Target 9-rung scale (canonical names for new code) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;
  --sp-9: 72px;

  /* Density (LOCKED) - tune the whole app's tightness from these
     four values, never per-component. Not yet consumed; the density
     pass wires components to these. */
  --pad-card-y: 10px;
  --pad-card-x: 14px;
  --pad-row: 2px;
  --pad-card-gap: 6px;

  /* ===============================================
     4. SHADOW TOKENS - Three elevations, warm-tinted
     ===============================================

     Chrome (top bar, rail, tab strip) gets NO shadow - the ground
     ladder already separates it. Shadow is for things that float.
     Legacy tiers map onto the three: xs/sm = card, md = card-hover,
     lg/xl/2xl = overlay.
  */

  --card-shadow: 0 1px 3px rgba(26, 26, 26, 0.05), 0 8px 24px -18px rgba(26, 26, 26, 0.30);
  --card-shadow-hover: 0 2px 6px rgba(26, 26, 26, 0.08), 0 14px 30px -16px rgba(26, 26, 26, 0.32);
  --shadow-overlay: 0 10px 30px -10px rgba(26, 26, 26, 0.22), 0 30px 60px -30px rgba(26, 26, 26, 0.30);
  --modal-backdrop: rgba(20, 22, 18, 0.5);
  --scrollbar-thumb: #c4c2be;

  --shadow-none: 0 0 #0000;
  --shadow-xs: var(--card-shadow);
  --shadow-sm: var(--card-shadow);
  --shadow-md: var(--card-shadow-hover);
  --shadow-lg: var(--shadow-overlay);
  --shadow-xl: var(--shadow-overlay);
  --shadow-2xl: var(--shadow-overlay);
  --shadow-device: 0 8px 40px rgba(0, 0, 0, 0.3);   /* Phone-frame device shadow */

  /* Device-frame palette (used by iPhone preview frame in Templates tab).
     Pure-black bezel is intentional for device chrome. */
  --bg-device-frame:  #1a1a1a;
  --bg-device-bezel:  #333333;
  --bg-device-screen: var(--bg-layer-4);
  --bg-device-nav:    #555555;

  /* ===============================================
     5. BORDER TOKENS - Radius and widths
     ===============================================

     Buttons, chips, badges and search fields are PILLS. Text inputs
     stay rectangles at 10px. Cards 12, panels 16.

     Legacy --border-radius-* names keep their OLD values (frozen)
     so unmigrated call sites do not move; restyled components
     consume the --radius-* set below.
  */

  --border-radius-none: 0;
  --border-radius-sm: 0.25rem;    /* 4px - legacy, frozen */
  --border-radius-md: 0.375rem;   /* 6px - legacy, frozen */
  --border-radius-lg: 0.5rem;     /* 8px - legacy, frozen */
  --border-radius-xl: 0.75rem;    /* 12px - legacy, frozen */
  --border-radius-2xl: 1rem;      /* 16px - legacy, frozen */
  --border-radius-3xl: 1.5rem;    /* 24px - legacy, frozen */
  --border-radius-full: 9999px;   /* Fully rounded (pills, avatars) */

  /* Target radius ramp (canonical names) */
  --radius-sm: 6px;               /* Chips, small elements */
  --radius-md: 10px;              /* Inputs, table wrappers */
  --radius-lg: 12px;              /* Cards */
  --radius-xl: 16px;              /* Panels */
  --radius-pill: 999px;           /* Buttons, badges, search */
  --radius-full: 50%;             /* Circles */

  --radius-button: var(--radius-pill);
  --radius-input: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-xl);

  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;

  /* ===============================================
     6. ANIMATION TOKENS - Timing and Easing
     =============================================== */

  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  --easing-linear: linear;
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Target motion tokens (canonical names for new code) */
  --dur-fast: 0.18s;
  --dur-base: 0.26s;
  --dur-slow: 0.52s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0.24, 1);

  /* ===============================================
     7. LAYOUT TOKENS - Grid, Breakpoints, Containers
     =============================================== */

  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Container max widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Grid columns */
  --grid-cols-1: repeat(1, minmax(0, 1fr));
  --grid-cols-2: repeat(2, minmax(0, 1fr));
  --grid-cols-3: repeat(3, minmax(0, 1fr));
  --grid-cols-4: repeat(4, minmax(0, 1fr));
  --grid-cols-5: repeat(5, minmax(0, 1fr));
  --grid-cols-6: repeat(6, minmax(0, 1fr));
  --grid-cols-12: repeat(12, minmax(0, 1fr));

  /* Flex utilities */
  --flex-1: 1 1 0%;
  --flex-auto: 1 1 auto;
  --flex-initial: 0 1 auto;
  --flex-none: none;

  /* ===============================================
     8. SEMANTIC TOKENS - Component-specific tokens
     =============================================== */

  /* Component-specific tokens - control heights.
     Standard height unchanged at 36px so no layout moves. */
  --button-height-sm: 34px;    /* Compact (was 32px) */
  --button-height-md: 36px;    /* Standard */
  --button-height-lg: 42px;    /* Large (was 44px) */

  --input-height-sm: 32px;     /* Compact */
  --input-height-md: 36px;     /* Standard */
  --input-height-lg: 42px;     /* Large (was 44px) */

  --icon-size-xs: 14px;        /* was 12px */
  --icon-size-sm: 1rem;        /* 16px */
  --icon-size-md: 1.25rem;     /* 20px */
  --icon-size-lg: 1.5rem;      /* 24px */
  --icon-size-xl: 2rem;        /* 32px */

  /* Layout tokens - chrome structure */
  --header-height: 3rem;        /* 48px */
  --sidebar-width-collapsed: 3rem;     /* 48px (was 44px) */
  --sidebar-width-expanded: 15rem;     /* 240px */
  --sidebar-transition: all 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
  --tab-strip-height: 2.25rem;         /* 36px (was 32px via --space-8) */
  --nav-row-height-l1: 2rem;           /* 32px - sidebar L1 rows */
  --nav-row-height-sub: 26px;          /* L2-L4 rows (was 24px - too tight for a 13px label) */

  /* Form control sizes */
  --checkbox-size: 1.25rem;    /* 20px */
  --radio-size: 1.25rem;       /* 20px */
  --switch-width: 2.75rem;     /* 44px */
  --switch-height: 1.5rem;     /* 24px */
  --switch-thumb-size: 1rem;   /* 16px */

  /* Template layout widths */
  --card-min-width: 15.625rem;   /* 250px - Dashboard card minimum */
  --form-max-width: 37.5rem;     /* 600px - Form container */
  --panel-max-width: 62.5rem;    /* 1000px - Single panel */
  --shell-max: 90rem;            /* 1440px - workspace ceiling */

  /* Focus - ONE treatment everywhere: 3px green ring at 18% plus a
     green border on the focused control. */
  --focus-outline: #16a34a;
  --focus-ring: 0 0 0 3px rgba(22, 163, 74, 0.18);
  --focus-ring-shadow: var(--focus-ring);
}

/* ===============================================
   9. DARK THEME - same names, different values
   ===============================================

   Inert until something sets data-theme="dark" on the root element.
   Green holds its hue: it is the one thing that does not shift.
*/
[data-theme="dark"] {
  --bg-layer-1: #11150f;
  --bg-layer-2: #161b14;
  --bg-layer-3: #1a201a;
  --bg-layer-4: #1a201a;
  --surface-sunk: #20271f;
  --text-primary: #f5f4f2;
  --text-secondary: #d6d8d2;
  --text-body: #d6d8d2;
  --text-muted: #9aa097;
  --text-light: #7d8479;
  --border-subtle: #222a21;
  --border-default: #2a3329;
  --color-success-light: rgba(22, 163, 74, 0.16);
  --color-warning-light: rgba(217, 154, 22, 0.18);
  --color-error-light: rgba(192, 57, 43, 0.18);
  --color-info-light: rgba(47, 111, 176, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s;
    --dur-base: 0s;
    --dur-slow: 0s;
    --duration-75: 0ms;
    --duration-100: 0ms;
    --duration-150: 0ms;
    --duration-200: 0ms;
    --duration-300: 0ms;
    --duration-500: 0ms;
    --duration-700: 0ms;
    --duration-1000: 0ms;
  }
}

/* ===============================================
   TSR OPERATOR SKIN (Wave B) -- opt-in bridge
   ===============================================

   The shared task-step-renderer.css scopes every rule under .tsr-scope and
   carries its own --tsr-* defaults (the canonical staff-phone look), so the
   template-builder phone frame stays a truthful staff preview. Operator
   surfaces that should render the widgets in the operator design system
   (Create Task modal request fields, Inbox execution modal) OPT IN by
   wrapping the renderer host in .tsr-operator-skin; this block then
   re-points the --tsr-* tokens at operator tokens. Never put the wrapper
   around the builder phone frame.

   Specificity note: this compound selector (0,2,0) outranks the sheet's own
   .tsr-scope default block (0,1,0), so it wins even though the shared sheet
   is linked after this file.
*/
.tsr-operator-skin .tsr-scope {
  /* Typography */
  --tsr-font: var(--font-family-sans);
  --tsr-text-xs: var(--text-xs);
  --tsr-text-sm: var(--text-sm);
  --tsr-text-md: var(--text-base);
  /* --text-sm, not --text-base: the renderer's field is the house .input
     (Input.css:21, --text-sm) and its label is the house .form-label
     (FormField.css:19, --text-sm + medium). Bridging to --text-base put the
     field a rung ABOVE both, visibly larger than the .form-label fields
     rendered beside it in the same Create Task modal. */
  --tsr-text-base: var(--text-sm);
  --tsr-text-lg: var(--text-md);
  --tsr-text-2xl: var(--text-xl);

  /* Brand accent */
  --tsr-accent: var(--color-primary);
  --tsr-accent-hover: var(--color-primary-hover);
  --tsr-accent-press: var(--color-primary-press);
  --tsr-accent-wash: var(--primary-wash);

  /* Surfaces + wells */
  --tsr-surface: var(--bg-layer-4);
  --tsr-surface-raised: var(--bg-layer-4);
  --tsr-hover: var(--bg-surface-hover);
  --tsr-active: var(--bg-surface-active);
  --tsr-well: var(--surface-sunk);
  --tsr-track: var(--border-subtle);
  --tsr-secondary-bg: var(--surface-sunk);
  --tsr-secondary-bg-hover: var(--border-subtle);

  /* Borders (operator inputs carry a visible default border) */
  --tsr-border: var(--border-default);
  --tsr-border-field: var(--border-default);
  --tsr-border-hover: var(--border-strong);
  --tsr-border-faint: var(--border-subtle);

  /* Text */
  --tsr-text: var(--text-primary);
  --tsr-text-secondary: var(--text-muted);
  --tsr-text-faint: var(--text-light);
  --tsr-text-inverse: var(--text-inverse);

  /* Status */
  --tsr-danger: var(--color-error);
  --tsr-danger-strong: var(--color-error);
  --tsr-danger-text: var(--color-error-hover);
  --tsr-danger-wash: var(--color-error-light);
  --tsr-danger-tint: var(--color-error-light);
  --tsr-danger-line: var(--color-error);
  --tsr-warning: var(--color-warning);
  --tsr-warning-text: var(--color-warning-hover);
  --tsr-warning-tint: var(--color-warning-light);
  --tsr-warning-wash: var(--color-warning-light);
  --tsr-warning-line: var(--color-warning);
  --tsr-info-tint: var(--color-info-light);
  --tsr-info-text: var(--color-info-hover);

  /* Spacing */
  --tsr-s-0: var(--space-0_5);
  --tsr-s-1: var(--space-1);
  --tsr-s-2: var(--space-2);
  --tsr-s-3: var(--space-3);
  --tsr-s-4: var(--space-4);
  --tsr-s-5: var(--space-5);
  --tsr-s-6: var(--space-6);
  --tsr-control-pad-y: var(--space-2);
  --tsr-control-pad-x: var(--space-2_5);

  /* Control geometry (atom-aligned) */
  --tsr-checkbox-size: var(--checkbox-size);
  --tsr-radio-size: var(--radio-size);
  --tsr-switch-w: var(--switch-width);
  --tsr-switch-h: var(--switch-height);
  --tsr-switch-thumb: var(--switch-thumb-size);

  /* Radii */
  --tsr-radius-sm: var(--radius-sm);
  --tsr-radius-md: var(--radius-md);
  --tsr-radius-lg: var(--radius-lg);
  --tsr-radius-pill: var(--radius-pill);
  --tsr-radius-full: var(--radius-full);

  /* Shadows + focus */
  --tsr-shadow-focus: var(--focus-ring);
  --tsr-shadow-sm: var(--card-shadow);

  /* Motion */
  --tsr-dur-fast: var(--duration-150);
  --tsr-dur-base: var(--duration-300);
  --tsr-dur-slow: var(--duration-500);
}