/* CAS.AI Design System - tokens (colours, spacing, radii, shadows, fonts, type scale, motion).
   Verbatim copy of the design system's tokens.css and its type/motion variables, snapshot 2026-09-29.
   Dark is the default theme; light switches via <html data-theme="light">.
   Fonts: Host Grotesk (display) + Geist (UI) from Google Fonts. */

:root,[data-theme="dark"]{
  --bg-base:#0d0e10;
  --bg-surface-1:#1f1f1f;
  --bg-surface-2:#181819;
  --bg-surface-3:#2b2b2b;
  --border-default:#333333;
  --fg-primary:#f2f3f5;
  --fg-secondary:#8a8f98;
  --gray-1:#595752;
  --accent:#e4f222;
  --success:#27a544;
  --success-subtle:rgba(21,172,77,.15);
  --error:#cf4548;
  --error-subtle:rgba(242,80,83,.16);
  --warning:#f59e0b;
  --warning-subtle:rgba(215,129,0,.15);
  --surface-page:var(--bg-base);
  --surface-card:var(--bg-surface-1);
  --surface-sunken:var(--bg-surface-2);
  --surface-raised:var(--bg-surface-3);
  --surface-hover:var(--bg-surface-3);
  --text-body:var(--fg-primary);
  --text-muted:var(--fg-secondary);
  --text-on-accent:#0d0e10;
  --button-primary:var(--fg-primary);
  --button-on-primary:var(--bg-base);
  --button-secondary:var(--fg-primary);
  --button-accent-hover-ink:var(--accent);
  --stroke-subtle:var(--border-default);
  --stroke-strong:#4a4a4a;
  --stroke-selected:var(--fg-primary);
  --focus-ring:var(--fg-secondary);
  --scrim:rgba(13,14,16,.72);
  --viz-1:#4d9ff2;
  --viz-2:#a78bfa;
  --viz-3:#27a544;
  --viz-4:#f59e0b;
  --viz-5:#cf4548;
  --aux-green:#34d399;
  --aux-blue:#4d9fff;
  --aux-amber:#fbbf24;
  --aux-pink:#f472b6;
  --aux-fuchsia:#e879f9;
  --aux-yellow:#facc15;
  --aux-teal:#2dd4bf;
  --aux-emerald:#00aa55;
  --shadow-none:none;
  --shadow-1:0 1px 2px rgba(0,0,0,.40);
  --shadow-2:0 4px 12px rgba(0,0,0,.45);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.04);
  --ring-focus:0 0 0 2px #8a8f98;
  --ring-error:0 0 0 2px rgba(242,80,83,.35);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg-base:#fffafa;
  --bg-surface-1:#f4f2f0;
  --bg-surface-2:#edebe7;
  --bg-surface-3:#dfdedc;
  --border-default:#c7c2bf;
  --fg-primary:#25221f;
  --fg-secondary:#616366;
  --success:#1b7330;
  --success-subtle:rgba(39,165,68,.15);
  --warning:#875c00;
  --text-on-accent:#25221f;
  --button-accent-hover-ink:var(--text-on-accent);
  --stroke-strong:#a9a39f;
  --viz-1:#2f7fd1;
  --aux-green:#21996d;
  --aux-blue:#1d85ff;
  --aux-amber:#ae7e03;
  --aux-pink:#f03e9b;
  --aux-fuchsia:#dc32f6;
  --aux-yellow:#a38303;
  --aux-teal:#1f9687;
  --aux-emerald:#009b4d;
  --ring-focus:0 0 0 2px #616366;
  color-scheme:light;
}
:root{
  --space-0:0px;
  --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;
  --gutter-page:24px;
  --gutter-card:20px;
  --gap-grid:16px;
  --sidebar-w:56px;
  --topbar-h:56px;
  --control-h:36px;
  --control-h-sm:28px;
  --control-h-lg:44px;
  --button-h:48px;
  --button-px:16px;
  --tag-h:34px;
  --radius-xs:4px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:6px;
  --radius-xl:6px;
  --radius-pill:999px;
  --radius-button:5px;
  --radius-control:6px;
  --radius-card:6px;
  --radius-modal:6px;
  --font-display:"Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-ui:"Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono:ui-monospace, "SF Mono", Menlo, monospace;
}

/* CAS.AI — variables the components read that are not tokens.json tokens
   (tokens.css supplies colours, spacing, radii, shadows and --font-display/--font-ui/--font-mono).
   Type: every size / leading / tracking value is the brand type slide, verbatim. */
:root{
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --type-hero-size:96px;      --type-hero-lh:104px; --type-hero-ls:-0.04em;  --type-hero-fw:800;
  --type-display-size:64px;   --type-display-lh:70px;--type-display-ls:-0.04em;--type-display-fw:800;
  --type-h1-size:48px;        --type-h1-lh:52px;    --type-h1-ls:-0.04em;    --type-h1-fw:700;
  --type-h2-size:40px;        --type-h2-lh:44px;    --type-h2-ls:-0.035em;   --type-h2-fw:700;
  --type-h3-size:32px;        --type-h3-lh:36px;    --type-h3-ls:-0.02em;    --type-h3-fw:700;
  --type-h4-size:24px;        --type-h4-lh:28px;    --type-h4-ls:-0.02em;    --type-h4-fw:500;
  --type-h5-size:20px;        --type-h5-lh:28px;    --type-h5-ls:-0.015em;   --type-h5-fw:500;
  --type-lead-size:18px;      --type-lead-lh:24px;  --type-lead-ls:-0.01em;  --type-lead-fw:400;
  --type-label-size:16px;     --type-label-lh:28px; --type-label-ls:-0.01em; --type-label-fw:600;
  --type-body-size:16px;      --type-body-lh:24px;  --type-body-ls:0em;      --type-body-fw:400;
  --type-small-size:14px;     --type-small-lh:20px; --type-small-ls:0em;     --type-small-fw:400;
  --type-micro-size:12px;     --type-micro-lh:16px; --type-micro-ls:0.04em;  --type-micro-fw:600;
}
/* Motion — fast and flat, no bounce. Data UI feels instant; only overlays animate visibly. */
:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:180ms; /* @kind other */
  --dur-slow:260ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard); /* @kind other */
}
:root{ --blur-scrim:blur(6px); }
/* Toast motion: enter fade + slide up (ease-out), exit fade (ease-in). */
:root{ --dur-toast-in:240ms; --dur-toast-out:200ms; }