/* ==========================================================================
   Boostly Synthesis Design System — tokens.css
   Синтез: инженерная эстетика Tessel (ink-scale, рельсы, моно-ярлыки)
   + чистый терминальный холст Grafit (hairline-сетка, сигнальные акценты)
   + премиальные капсулы Merido (mint #82ffcd / lilac #e2cbff, glow, 33px).
   Темы: light (бумага), dark (ink-50), black (OLED, по умолчанию).
   Брейкпоинты (в @media): sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1440
   ========================================================================== */

/* ---------- Primitives ---------- */
:root {
  /* Ink scale (Tessel) */
  --ink-0: #000000;
  --ink-50: #0a0a0a;
  --ink-100: #111111;
  --ink-150: #191919;
  --ink-200: #1f1f1f;
  --ink-250: #272727;
  --ink-300: #333333;
  --ink-400: #555555;
  --ink-500: #8c8c8c;
  --ink-600: #a6a6a6;
  --ink-700: #d4d4d4;
  --ink-800: #e8e8e6;
  --ink-900: #f4f4f1;
  --ink-1000: #ffffff;
  /* Signal accents (Merido capsules + Tessel/Grafit live) */
  --mint: #ffffff;
  --mint-dim: rgba(255,255,255,.14);
  --lilac: #d4d4d4;
  --lilac-dim: rgba(255,255,255,.13);
  --signal-green: #e8e8e6;
  --signal-green-d: #8c8c8c;
  --signal-blue: #d4d4d4;
  --signal-blue-d: #555555;
  --signal-amber: #a6a6a6;
  --signal-amber-d: #555555;
  --signal-red: #8c8c8c;
  --signal-red-d: #3f3f3f;
  /* Legacy semantic palette (used by pages for statuses) */
  --blue-50: #f4f4f1;
  --blue-100: #ecece8;
  --blue-200: #dcdcd7;
  --blue-300: #b5b5b0;
  --blue-400: #8c8c8c;
  --blue-500: #555555;
  --blue-600: #333333;
  --blue-700: #1f1f1f;
  --green-50: #f4f4f1;
  --green-100: #ecece8;
  --green-200: #dcdcd7;
  --green-300: #a6a6a6;
  --green-400: #8c8c8c;
  --green-600: #333333;
  --green-800: #1f1f1f;
  --rose-50: #f4f4f1;
  --rose-100: #ecece8;
  --rose-200: #dcdcd7;
  --rose-300: #b5b5b0;
  --rose-400: #8c8c8c;
  --rose-600: #333333;
  --rose-800: #1f1f1f;
  --amber-50: #f4f4f1;
  --amber-100: #ecece8;
  --amber-300: #b5b5b0;
  --amber-400: #8c8c8c;
  --amber-600: #555555;
  /* Type — hybrid cyrillic pairs */
  --font-display: 'Inter Tight', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Golos Text', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'PT Mono', 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-display: clamp(2.625rem, 1.6rem + 4.6vw, 4.5rem);
  --leading-display: 1.0;
  --tracking-display: -0.035em;
  --weight-display: 500;
  --text-h1: clamp(2.125rem, 1.55rem + 2.8vw, 3.5rem);
  --leading-h1: 1.02;
  --tracking-h1: -0.03em;
  --weight-h1: 500;
  --text-h2: clamp(1.75rem, 1.45rem + 1.6vw, 2.5rem);
  --leading-h2: 1.08;
  --tracking-h2: -0.03em;
  --weight-h2: 500;
  --text-h3: clamp(1.375rem, 1.25rem + .7vw, 1.75rem);
  --leading-h3: 1.16;
  --tracking-h3: -0.02em;
  --weight-h3: 500;
  --text-h4: 1.375rem;
  --leading-h4: 1.25;
  --tracking-h4: -0.015em;
  --weight-h4: 500;
  --text-h5: 1.0625rem;
  --leading-h5: 1.35;
  --tracking-h5: -0.012em;
  --weight-h5: 500;
  --text-lead: 1.0625rem;
  --leading-lead: 1.5;
  --tracking-lead: -0.01em;
  --weight-lead: 400;
  --text-body: 1rem;
  --leading-body: 1.55;
  --tracking-body: -0.006em;
  --weight-body: 400;
  --text-body-sm: 0.875rem;
  --leading-body-sm: 1.45;
  --tracking-body-sm: -0.006em;
  --weight-body-sm: 400;
  --text-caption: 0.75rem;
  --leading-caption: 1.42;
  --tracking-caption: 0;
  --weight-caption: 400;
  --text-label: 0.75rem;
  --leading-label: 1.3;
  --tracking-label: 0;
  --weight-label: 500;
  --text-mono: 0.8125rem;
  --leading-mono: 1.55;
  --tracking-mono: -0.01em;
  --weight-mono: 400;
  --text-mono-xs: 0.6875rem;
  --leading-mono-xs: 1.4;
  --tracking-mono-xs: 0;
  --weight-mono-xs: 400;
  --space-0: 0;
  --space-px: 1px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  /* Radius — инженерная геометрия + премиальная капсула Merido */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 33px;
  --radius-3xl: 44px;
  --radius-pill: 999px;
  --radius-full: 50%;
  --shadow-none: none;
  --banner-height: 8px;
  --avatar-hi: hsl(0 0% calc(var(--al, 74%) + 10%));
  --avatar-lo: hsl(0 0% calc(var(--al, 74%) - 10%));
  /* Hallmark 48: mask/shadow literals lifted into tokens */
  --mask-solid: #000;
  --mask-soft: rgba(0,0,0,.55);
  --shade-key: rgba(0,0,0,.1);
  --shade-soft: rgba(0,0,0,.3);
  --shade-deep: rgba(0,0,0,.4);
  --shade-bubble: rgba(22,24,29,.35);
  --sheen-soft: rgba(255,255,255,.05);
  --sheen-faint: rgba(255,255,255,.025);
  --sheen-mid: rgba(255,255,255,.08);
  --sheen-lift: rgba(255,255,255,.18);
  --sheen-hot: rgba(255,255,255,.35);
  --ink-glass: rgba(20,20,20,.08);
  --ink-glass2: rgba(255,255,255,.08);
  --grid-line: rgba(128,128,128,.05);
  --avatar-ink: hsl(0 0% 24%);
  --avatar-ink-inv: hsl(0 0% 92%);
  --bubble-hi: #f2f2f2;
  --bubble-lo: #c4c4c4;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 700;
  --z-tooltip: 800;
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 520ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --spring-duration: 520ms;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;
  --frame: 1368px;
  --container: 1216px;
  --container-narrow: 760px;
  --gutter: clamp(16px, 4vw, 52px);
  --header-h: 60px;
  --panel-inset: 0px;
  --section-y: clamp(64px, 9vw, 128px);
}

/* ---------- Light (paper, Tessel-style) ---------- */
:root,
[data-theme="light"] {
  --bg: #f4f4f1;
  --bg-alt: #ecece8;
  --bg-soft: #f8f8f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-glass: rgba(255,255,255,.72);
  --surface-sunken: #ecece8;
  --surface-hover: rgba(10,10,10,.04);
  --surface-inverse: #0a0a0a;
  --panel: #ecece8;
  --panel-blue: #ecece8;
  --panel-rose: #ecece8;
  --panel-green: #ecece8;
  --border: #dcdcd7;
  --border-strong: rgba(10,10,10,.2);
  --border-subtle: #e8e8e4;
  --hairline: rgba(10,10,10,.09);
  --rail: #dcdcd7;
  --dot: rgba(10,10,10,.18);
  --text-primary: #0a0a0a;
  --text-heading: #0a0a0a;
  --text-secondary: #555553;
  --text-tertiary: #8c8c88;
  --text-disabled: #b5b5b0;
  --text-muted: #555553;
  --text-inverse: #ffffff;
  --accent: #0a0a0a;
  --accent-hover: #272727;
  --accent-fg: #ffffff;
  --accent-foreground: #ffffff;
  --accent-text: #0a0a0a;
  --accent-soft: rgba(10,10,10,.06);
  --accent-line: rgba(10,10,10,.28);
  --link: #0a0a0a;
  --key-bg: #0a0a0a;
  --key-fg: #ffffff;
  --key-hover: #272727;
  --chip-bg: #ecece8;
  --chip-fg: #333333;
  --blue-fg: #1f1f1f;
  --blue-tint: rgba(10,10,10,.05);
  --green-fg: #0a0a0a;
  --green-tint: rgba(10,10,10,.06);
  --rose-fg: #333333;
  --rose-tint: rgba(10,10,10,.05);
  --rose-heading: #0a0a0a;
  --amber-fg: #555555;
  --amber-tint: rgba(10,10,10,.05);
  --success: #0a0a0a;
  --success-bg: rgba(10,10,10,.06);
  --warning: #555555;
  --warning-bg: rgba(10,10,10,.05);
  --danger: #333333;
  --danger-bg: rgba(10,10,10,.05);
  --info: #1f1f1f;
  --info-bg: rgba(10,10,10,.05);
  --live: #0a0a0a;
  --mint-fg: #0a0a0a;
  --lilac-fg: #333333;
  --grad-green: linear-gradient(180deg, rgba(10,10,10,.07), rgba(10,10,10,.02));
  --grad-blue: linear-gradient(180deg, rgba(10,10,10,.07), rgba(10,10,10,.02));
  --grad-grey: linear-gradient(180deg, rgba(10,10,10,.06), rgba(10,10,10,.02));
  --grad-rose: linear-gradient(180deg, rgba(10,10,10,.06), rgba(10,10,10,.02));
  --grad-mint: linear-gradient(180deg, rgba(10,10,10,.09), rgba(10,10,10,.03));
  --glow: radial-gradient(closest-side, rgba(10,10,10,.2), rgba(10,10,10,0));
  --accent-glow: 0 0 56px rgba(10,10,10,.22), 0 0 20px rgba(10,10,10,.1);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(10,10,10,.45);
  --focus-accent: rgba(10,10,10,.55);
  --overlay: rgba(10,10,10,.42);
  --shadow-xs: 0 1px 2px rgba(10,10,10,.05);
  --shadow-key: 0 1px 0 rgba(10,10,10,.2), 0 8px 20px -10px rgba(10,10,10,.3);
  --shadow-raised: 0 0 0 1px var(--hairline);
  --shadow-card: 0 0 0 1px var(--hairline), 0 2px 24px -8px rgba(10,10,10,.08);
  --shadow-well: inset 0 0 0 1px var(--border);
  --shadow-float: 0 24px 60px -20px rgba(10,10,10,.28), 0 0 0 1px rgba(10,10,10,.08);
  --shadow-glow: 0 0 56px rgba(10,10,10,.22), 0 0 20px rgba(10,10,10,.1);
  --code-bg: #0a0a0a;
  --code-fg: #e8e8e6;
  --code-muted: #8c8c8c;
  --code-line: rgba(255,255,255,.08);
  --pro-border-from: rgba(10,10,10,.4);
  --pro-border-to: rgba(10,10,10,.08);
  color-scheme: light;
}

/* ---------- Dark (ink-50) ---------- */
[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-alt: #0d0d0d;
  --bg-soft: #0d0d0d;
  --surface: #111111;
  --surface-raised: #191919;
  --surface-glass: rgba(17,17,17,.78);
  --surface-sunken: #070707;
  --surface-hover: rgba(255,255,255,.045);
  --surface-inverse: #ffffff;
  --panel: #0d0d0d;
  --panel-blue: #0d0d0d;
  --panel-rose: #0d0d0d;
  --panel-green: #0d0d0d;
  --border: #272727;
  --border-strong: rgba(255,255,255,.18);
  --border-subtle: #1a1a1a;
  --hairline: rgba(255,255,255,.07);
  --rail: #1f1f1f;
  --dot: rgba(255,255,255,.16);
  --text-primary: #ffffff;
  --text-heading: #ffffff;
  --text-secondary: #a3a3a3;
  --text-tertiary: #8c8c8c;
  --text-disabled: #4d4d4d;
  --text-muted: #a3a3a3;
  --text-inverse: #0a0a0a;
  --accent: #ffffff;
  --accent-hover: #e8e8e6;
  --accent-fg: #0a0a0a;
  --accent-foreground: #0a0a0a;
  --accent-text: var(--mint);
  --accent-soft: rgba(255,255,255,.1);
  --accent-line: rgba(255,255,255,.35);
  --link: #ffffff;
  --key-bg: #ffffff;
  --key-fg: #0a0a0a;
  --key-hover: #e8e8e6;
  --chip-bg: #141414;
  --chip-fg: #d4d4d4;
  --blue-fg: #d4d4d4;
  --blue-tint: rgba(255,255,255,.06);
  --green-fg: #e8e8e6;
  --green-tint: rgba(255,255,255,.07);
  --rose-fg: #a6a6a6;
  --rose-tint: rgba(255,255,255,.05);
  --rose-heading: #d4d4d4;
  --amber-fg: #a6a6a6;
  --amber-tint: rgba(255,255,255,.05);
  --success: #e8e8e6;
  --success-bg: rgba(255,255,255,.07);
  --warning: #a6a6a6;
  --warning-bg: rgba(255,255,255,.05);
  --danger: #a6a6a6;
  --danger-bg: rgba(255,255,255,.05);
  --info: #d4d4d4;
  --info-bg: rgba(255,255,255,.06);
  --live: var(--signal-green);
  --mint-fg: var(--mint);
  --lilac-fg: var(--lilac);
  --grad-green: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --grad-blue: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --grad-grey: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  --grad-rose: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  --grad-mint: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --glow: radial-gradient(closest-side, rgba(255,255,255,.18), rgba(255,255,255,0));
  --accent-glow: 0 0 64px rgba(255,255,255,.28), 0 0 24px rgba(255,255,255,.13);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(232,232,230,.55);
  --focus-accent: rgba(232,232,230,.65);
  --overlay: rgba(0,0,0,.66);
  --shadow-xs: 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-key: 0 1px 0 rgba(0,0,0,.4), 0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-raised: 0 0 0 1px var(--hairline);
  --shadow-card: 0 0 0 1px var(--hairline);
  --shadow-well: inset 0 0 0 1px var(--border);
  --shadow-float: 0 24px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
  --shadow-glow: 0 0 64px rgba(255,255,255,.28), 0 0 24px rgba(255,255,255,.13);
  --code-bg: #050505;
  --code-fg: #e8e8e6;
  --code-muted: #8c8c8c;
  --code-line: rgba(255,255,255,.07);
  --avatar-hi: hsl(0 0% calc(var(--al, 74%) - 34%));
  --avatar-lo: hsl(0 0% calc(var(--al, 74%) - 52%));
  --pro-border-from: rgba(255,255,255,.45);
  --pro-border-to: rgba(255,255,255,.08);
  color-scheme: dark;
}

/* ---------- Total Black (OLED, default) ---------- */
[data-theme="black"] {
  --bg: #000000;
  --bg-alt: #070707;
  --bg-soft: #040404;
  --surface: #0a0a0a;
  --surface-raised: #121212;
  --surface-glass: rgba(11,11,11,.8);
  --surface-sunken: #000000;
  --surface-hover: rgba(255,255,255,.04);
  --surface-inverse: #ffffff;
  --panel: #070707;
  --panel-blue: #070707;
  --panel-rose: #070707;
  --panel-green: #070707;
  --border: #27272a;
  --border-strong: rgba(255,255,255,.18);
  --border-subtle: #141414;
  --hairline: rgba(255,255,255,.1);
  --rail: #232326;
  --dot: rgba(255,255,255,.16);
  --text-primary: #ffffff;
  --text-heading: #ffffff;
  --text-secondary: #a3a3a3;
  --text-tertiary: #8c8c8c;
  --text-disabled: #4d4d4d;
  --text-muted: #a3a3a3;
  --text-inverse: #0a0a0a;
  --accent: #ffffff;
  --accent-hover: #e8e8e6;
  --accent-fg: #0a0a0a;
  --accent-foreground: #0a0a0a;
  --accent-text: var(--mint);
  --accent-soft: rgba(255,255,255,.1);
  --accent-line: rgba(255,255,255,.35);
  --link: #ffffff;
  --key-bg: #ffffff;
  --key-fg: #0a0a0a;
  --key-hover: #e8e8e6;
  --chip-bg: #121212;
  --chip-fg: #d4d4d4;
  --blue-fg: #d4d4d4;
  --blue-tint: rgba(255,255,255,.06);
  --green-fg: #e8e8e6;
  --green-tint: rgba(255,255,255,.07);
  --rose-fg: #a6a6a6;
  --rose-tint: rgba(255,255,255,.05);
  --rose-heading: #d4d4d4;
  --amber-fg: #a6a6a6;
  --amber-tint: rgba(255,255,255,.05);
  --success: #e8e8e6;
  --success-bg: rgba(255,255,255,.07);
  --warning: #a6a6a6;
  --warning-bg: rgba(255,255,255,.05);
  --danger: #a6a6a6;
  --danger-bg: rgba(255,255,255,.05);
  --info: #d4d4d4;
  --info-bg: rgba(255,255,255,.06);
  --live: var(--signal-green);
  --mint-fg: var(--mint);
  --lilac-fg: var(--lilac);
  --grad-green: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --grad-blue: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --grad-grey: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  --grad-rose: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  --grad-mint: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  --glow: radial-gradient(closest-side, rgba(255,255,255,.16), rgba(255,255,255,0));
  --accent-glow: 0 0 64px rgba(255,255,255,.28), 0 0 24px rgba(255,255,255,.13);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(232,232,230,.55);
  --focus-accent: rgba(232,232,230,.65);
  --overlay: rgba(0,0,0,.7);
  --shadow-xs: 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-key: 0 1px 0 rgba(0,0,0,.4), 0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-raised: 0 0 0 1px var(--hairline);
  --shadow-card: 0 0 0 1px var(--hairline);
  --shadow-well: inset 0 0 0 1px var(--border);
  --shadow-float: 0 24px 60px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08);
  --shadow-glow: 0 0 64px rgba(255,255,255,.28), 0 0 24px rgba(255,255,255,.13);
  --code-bg: #050505;
  --code-fg: #e8e8e6;
  --code-muted: #8c8c8c;
  --code-line: rgba(255,255,255,.07);
  --avatar-hi: hsl(0 0% calc(var(--al, 74%) - 34%));
  --avatar-lo: hsl(0 0% calc(var(--al, 74%) - 52%));
  --pro-border-from: rgba(255,255,255,.45);
  --pro-border-to: rgba(255,255,255,.08);
  color-scheme: dark;
}

/* ---------- System preference ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0a0a0a; --bg-alt: #0d0d0d; --bg-soft: #0d0d0d;
    --surface: #111111; --surface-raised: #191919; --surface-glass: rgba(17,17,17,.78);
    --surface-sunken: #070707; --surface-hover: rgba(255,255,255,.045); --surface-inverse: #ffffff;
    --panel: #0d0d0d; --panel-blue: #0d0d0d; --panel-rose: #0d0d0d; --panel-green: #0d0d0d;
    --border: #272727; --border-strong: rgba(255,255,255,.18); --border-subtle: #1a1a1a;
    --hairline: rgba(255,255,255,.07); --rail: #1f1f1f; --dot: rgba(255,255,255,.16);
    --text-primary: #ffffff; --text-heading: #ffffff; --text-secondary: #a3a3a3;
    --text-tertiary: #8c8c8c; --text-disabled: #4d4d4d; --text-muted: #a3a3a3; --text-inverse: #0a0a0a;
    --accent: #ffffff; --accent-hover: #e8e8e6; --accent-fg: #0a0a0a; --accent-foreground: #0a0a0a;
    --accent-text: var(--mint); --accent-soft: rgba(255,255,255,.1); --accent-line: rgba(255,255,255,.35);
    --link: #ffffff; --key-bg: #ffffff; --key-fg: #0a0a0a; --key-hover: #e8e8e6;
    --chip-bg: #141414; --chip-fg: #d4d4d4;
    --blue-fg: #d4d4d4; --blue-tint: rgba(255,255,255,.06);
    --green-fg: #e8e8e6; --green-tint: rgba(255,255,255,.07);
    --rose-fg: #a6a6a6; --rose-tint: rgba(255,255,255,.05); --rose-heading: #d4d4d4;
    --amber-fg: #a6a6a6; --amber-tint: rgba(255,255,255,.05);
    --success: #e8e8e6; --success-bg: rgba(255,255,255,.07);
    --warning: #a6a6a6; --warning-bg: rgba(255,255,255,.05);
    --danger: #a6a6a6; --danger-bg: rgba(255,255,255,.05);
    --info: #d4d4d4; --info-bg: rgba(255,255,255,.06);
    --live: var(--signal-green); --mint-fg: var(--mint); --lilac-fg: var(--lilac);
    --grad-green: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    --grad-blue: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    --grad-grey: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    --grad-rose: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    --grad-mint: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
    --glow: radial-gradient(closest-side, rgba(255,255,255,.16), rgba(255,255,255,0));
    --accent-glow: 0 0 64px rgba(255,255,255,.28), 0 0 24px rgba(255,255,255,.13);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(232,232,230,.55);
  --focus-accent: rgba(232,232,230,.65);
    --overlay: rgba(0,0,0,.66);
    --shadow-xs: 0 1px 0 rgba(255,255,255,.04) inset;
    --shadow-key: 0 1px 0 rgba(0,0,0,.4), 0 8px 24px -10px rgba(0,0,0,.6);
    --shadow-raised: 0 0 0 1px var(--hairline);
    --shadow-card: 0 0 0 1px var(--hairline);
    --shadow-well: inset 0 0 0 1px var(--border);
    --shadow-float: 0 24px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
    --shadow-glow: 0 0 64px rgba(255,255,255,.28), 0 0 24px rgba(255,255,255,.13);
    --code-bg: #050505; --code-fg: #e8e8e6; --code-muted: #8c8c8c; --code-line: rgba(255,255,255,.07);
    --pro-border-from: rgba(255,255,255,.45); --pro-border-to: rgba(255,255,255,.08);
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}