/*
 * Continuity UI design tokens v3.0 — docs/STYLEGUIDE.md
 * Architecture: primitives -> semantics -> components -> legacy aliases.
 */
:root {
  color-scheme: dark;
  /* Primitives: raw values; feature CSS must not use them directly. */
  --primitive-neutral-0:#fff; --primitive-neutral-100:#f0eff4;
  --primitive-neutral-300:#c8c5cf; --primitive-neutral-400:#aaa8b2;
  --primitive-neutral-500:#817e89; --primitive-neutral-600:#6f6d77;
  --primitive-neutral-700:#3c3a43; --primitive-neutral-800:#27262d;
  --primitive-neutral-850:#202027; --primitive-neutral-900:#19191f;
  --primitive-neutral-925:#121216; --primitive-neutral-950:#0e0e11;
  --primitive-neutral-975:#09090b; --primitive-neutral-1000:#060607;
  --primitive-purple-300:#c2b4ff; --primitive-purple-500:#967eff;
  --primitive-purple-600:#7b63e6; --primitive-purple-700:#654dc8;
  --primitive-purple-a08:rgba(123,99,230,.08);
  --primitive-purple-a14:rgba(150,126,255,.14);
  --primitive-purple-a16:rgba(123,99,230,.16);
  --primitive-purple-a42:rgba(150,126,255,.42);
  --primitive-green-500:#43ba86; --primitive-amber-500:#e3a246;
  --primitive-red-500:#e17881; --primitive-blue-500:#5594dc;
  --primitive-green-a12:rgba(67,186,134,.12);
  --primitive-amber-a12:rgba(227,162,70,.12);
  --primitive-red-a12:rgba(225,120,129,.12);
  --primitive-blue-a12:rgba(85,148,220,.12);

  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px;
  --space-4:16px; --space-5:20px; --space-6:24px; --space-7:28px;
  --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px;
  --primitive-radius-8:8px; --primitive-radius-10:10px;
  --primitive-radius-12:12px; --primitive-radius-14:14px;
  --primitive-radius-16:16px; --primitive-radius-18:18px;
  --primitive-radius-22:22px; --primitive-radius-round:999px;
  --font-family-ui:"Onest",system-ui,sans-serif;
  --font-family-data:"DM Mono",ui-monospace,monospace;
  --font-size-10:10px; --font-size-11:11px; --font-size-12:12px;
  --font-size-13:13px; --font-size-14:14px; --font-size-16:16px;
  --font-size-18:18px; --font-size-22:22px; --font-size-26:26px;
  --font-size-32:32px; --font-size-46:46px;
  --duration-fast:140ms; --duration-normal:200ms; --duration-slow:300ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-emphasized:cubic-bezier(.2,.8,.2,1);
  --z-content:1; --z-sticky:30; --z-popover:60;
  --z-overlay:80; --z-modal:90; --z-toast:100;

  /* Semantics: purpose-based values used by layouts and features. */
  --color-canvas:var(--primitive-neutral-975);
  --color-canvas-deep:var(--primitive-neutral-1000);
  --color-surface:var(--primitive-neutral-925);
  --color-surface-raised:var(--primitive-neutral-900);
  --color-surface-quiet:#101014;
  --color-surface-hover:var(--primitive-neutral-850);
  --color-surface-overlay:rgba(18,18,22,.96);
  --color-surface-scrim:rgba(5,5,7,.72);
  --color-text:var(--primitive-neutral-100);
  --color-text-secondary:var(--primitive-neutral-400);
  --color-text-muted:var(--primitive-neutral-600);
  --color-text-on-accent:var(--primitive-neutral-0);
  --color-accent:var(--primitive-purple-600);
  --color-accent-hover:var(--primitive-purple-500);
  --color-accent-active:var(--primitive-purple-700);
  --color-accent-text:var(--primitive-purple-300);
  --color-accent-soft:var(--primitive-purple-a16);
  --color-focus:var(--primitive-purple-500);
  --color-border:rgba(255,255,255,.08);
  --color-border-strong:rgba(255,255,255,.14);
  --color-border-accent:var(--primitive-purple-a42);
  --color-success:var(--primitive-green-500);
  --color-warning:var(--primitive-amber-500);
  --color-danger:var(--primitive-red-500);
  --color-info:var(--primitive-blue-500);
  --color-success-soft:var(--primitive-green-a12);
  --color-warning-soft:var(--primitive-amber-a12);
  --color-danger-soft:var(--primitive-red-a12);
  --color-info-soft:var(--primitive-blue-a12);

  --layout-content-max:1310px; --layout-readable-max:680px;
  --layout-safe-inline:clamp(16px,2vw,28px);
  --layout-safe-inline-mobile:12px;
  --layout-safe-block:12px;
  --layout-page-bottom:clamp(40px,6vh,64px);
  --layout-mobile-action-clearance:max(var(--space-3),env(safe-area-inset-bottom));
  --layout-tile-gap:12px; --layout-section-gap:16px;
  --layout-grid-columns:12; --layout-grid-gap:var(--layout-tile-gap);
  --layout-grid-content-span:8; --layout-grid-rail-span:4;
  --layout-rail-min:310px; --layout-rail-max:390px;
  --radius-control:var(--primitive-radius-10);
  --radius-tile:var(--primitive-radius-16);
  --radius-page:var(--primitive-radius-22);
  --radius-pill:var(--primitive-radius-round);
  --shadow-tile:none;
  --shadow-floating:0 24px 72px rgba(0,0,0,.48);
  --shadow-focus:0 0 0 3px var(--primitive-purple-a14);
  --text-display-size:clamp(26px,3vw,var(--font-size-32));
  --text-title-size:var(--font-size-22);
  --text-section-size:var(--font-size-18);
  --text-body-size:var(--font-size-14);
  --text-body-compact-size:var(--font-size-13);
  --text-label-size:var(--font-size-11);
  --text-caption-size:var(--font-size-10);

  /* Components: stable contracts. */
  --header-height:62px; --header-bg:transparent;
  --header-border:transparent; --header-radius:0;
  --header-padding:0;
  --tile-bg:var(--color-surface); --tile-bg-quiet:var(--color-surface-quiet);
  --tile-border:var(--color-border); --tile-radius:var(--radius-tile);
  --tile-padding:var(--space-4); --tile-padding-comfortable:var(--space-6);
  --tile-gap:var(--layout-tile-gap);
  --button-height-sm:32px; --button-height-md:40px; --button-height-lg:48px;
  --button-padding-inline:15px; --button-radius:var(--radius-control);
  --button-primary-bg:var(--color-accent);
  --button-primary-bg-hover:var(--color-accent-hover);
  --button-secondary-bg:var(--color-surface-raised);
  --button-secondary-bg-hover:var(--color-surface-hover);
  --field-height:40px; --field-bg:#0e0e12;
  --field-border:var(--color-border);
  --field-border-hover:var(--color-border-strong);
  --field-border-focus:var(--color-focus);
  --field-radius:var(--radius-control); --field-padding-inline:var(--space-3);
  --chip-height-sm:22px; --chip-height-md:28px;
  --chip-bg:var(--color-surface-raised);
  --chip-bg-selected:var(--color-accent-soft);
  --chip-border:var(--color-border); --chip-radius:var(--radius-pill);
  --dialog-width-sm:400px; --dialog-width-md:512px; --dialog-width-lg:720px;
  --dialog-bg:var(--color-surface); --dialog-shell-bg:var(--color-surface-raised);
  --dialog-content-bg:var(--color-surface); --dialog-overlay:var(--color-surface-scrim);
  --dialog-radius:var(--radius-page); --dialog-shadow:var(--shadow-floating);
  --canvas-dot-color:rgba(199,186,255,.16);
  --canvas-dot-size:1px; --canvas-dot-grid:14px;
  --status-height:26px; --status-padding-inline:9px;
  --status-radius:var(--radius-pill);
  --status-success-bg:var(--color-success-soft);
  --status-warning-bg:var(--color-warning-soft);
  --status-danger-bg:var(--color-danger-soft);
  --status-info-bg:var(--color-info-soft);
  --action-zone-bg:var(--color-surface-overlay);
  --action-zone-border:var(--color-border-strong);
  --action-zone-radius:var(--radius-tile);
  --action-zone-padding:var(--space-3);
  --action-zone-gap:var(--space-2);
  --density-comfortable-control:var(--button-height-md);
  --density-compact-control:var(--button-height-sm);
  --density-comfortable-padding:var(--space-4);
  --density-compact-padding:var(--space-3);
  --motion-color:var(--duration-fast) var(--ease-standard);
  --motion-control:var(--duration-normal) var(--ease-standard);
  --motion-overlay:var(--duration-slow) var(--ease-emphasized);
  --icon-size-inline:14px;
  --icon-size-control:16px;
  --icon-size-action:18px;
  --icon-size-section:22px;
  --icon-size-empty:28px;
  --icon-container-compact:32px;
  --icon-container-default:40px;
  --icon-container-prominent:56px;
  --icon-color-default:var(--color-text-secondary);
  --icon-color-emphasis:var(--color-accent-text);

  /* Legacy aliases: temporary compatibility for the current stylesheet. */
  --bg:var(--color-canvas); --surface:var(--color-surface);
  --surface-raised:var(--color-surface-raised);
  --surface-soft:var(--color-surface-hover);
  --line:var(--color-border); --line-strong:var(--color-border-strong);
  --text:var(--color-text); --text-secondary:var(--color-text-secondary);
  --text-muted:var(--color-text-muted); --accent:var(--color-accent);
  --accent-strong:var(--color-accent-hover); --accent-soft:var(--color-accent-soft);
  --success:var(--color-success); --warning:var(--color-warning);
  --danger:var(--color-danger); --radius-card:var(--radius-page);
  --safe-inline:var(--layout-safe-inline); --content-max:var(--layout-content-max);
  --shadow-card:var(--shadow-tile); --font:var(--font-family-ui);
  --mono:var(--font-family-data);
}
@media (max-width:820px) {
  :root {
    --layout-safe-inline:var(--layout-safe-inline-mobile); --layout-tile-gap:10px;
    --radius-page:var(--primitive-radius-16);
    --radius-tile:var(--primitive-radius-16);
    --tile-padding-comfortable:var(--space-4);
  }
}
@media (prefers-reduced-motion:reduce) {
  :root { --duration-fast:1ms; --duration-normal:1ms; --duration-slow:1ms; }
}