/* ============================================================
   ChETL — Design Tokens
   ------------------------------------------------------------
   Shared with the computational platform's theme
   (chetl-demo/assets/styles/theme.css → .theme-chetl). Values are
   kept in lockstep so the website and the platform read as one
   product. See design-system Proposal v1.

   Platform reference (.theme-chetl):
     --surface-base    #f4f6fa   --accent-primary #2b5bd0
     --surface-elevated#ffffff   --accent-bright  #356fe0
     --surface-subtle  #eceff4   --accent-soft    #e7edfb
     --text-primary    #1e2a38   --text-secondary #3a4658
     --text-muted      #64707f   --border-muted   #dbe1ea
     --border-strong   #b7c0ce   --note           #b8801f
     --accent-success  #1f8f5f (validation only, never a result)
   Do not introduce magic numbers elsewhere.
   ============================================================ */
:root {
  /* ---- Brand (deepened engineering blue; bright = interactive state) ---- */
  --brand-blue-600:#2b5bd0; --brand-blue-700:#244f9f; --brand-blue-800:#1d3f80; --brand-blue-300:#b7c0ce;
  --brand-blue-bright:#356fe0; --brand-blue-soft:#e7edfb;
  --royal-navy:#172b54; --ink-900:#0b1220; --ink-800:#131a2a;

  /* Note + validation accents (semantic, kept apart from the accent) */
  --trace-note:#b8801f;         /* amber note bar (engine note / caution) */
  --trace-note-800:#8a5a00;
  --note-surface:#fbf3e2;       /* amber note background */
  --result-green:#1f8f5f;       /* platform --accent-success — validation ONLY */

  /* ---- Neutral ramp — one cool-slate hue ---- */
  --n-0:#FFFFFF; --n-25:#FBFCFE; --n-50:#F7F9FC; --n-75:#F4F6FA; --n-100:#ECEFF4;
  --n-200:#DBE1EA; --n-300:#C6CDD9; --n-400:#B7C0CE; --n-500:#64707F;
  --n-600:#4A5563; --n-700:#3A4658; --n-800:#1E2A38; --n-900:#152030;

  /* ---- Semantic (light) — mapped 1:1 to the platform ---- */
  --surface:var(--n-0);            /* elevated / cards = white */
  --surface-paper:var(--n-75);     /* page base = platform --surface-base #f4f6fa */
  --surface-raised:var(--n-0);
  --surface-sunken:#eceff4;         /* recessed bands = platform --surface-subtle */
  --surface-subtle:#eceff4;         /* platform --surface-subtle */
  --border:#dbe1ea;                 /* platform --border-muted */
  --border-strong:#b7c0ce;          /* platform --border-strong */
  --divider:#dbe1ea;                /* platform --divider-color */
  --text-primary:#1e2a38;           /* platform --text-primary */
  --text-secondary:#3a4658;
  --text-muted:#64707f;
  --accent:var(--brand-blue-600);
  --accent-hover:var(--brand-blue-bright);   /* hover lifts to the bright blue */
  --accent-active:var(--brand-blue-700);
  --accent-soft:var(--brand-blue-soft);
  /* --reasoning: the accent used to mark engine-derived numerical values */
  --reasoning:var(--accent);
  --annotation:var(--trace-note-800);
  --success:var(--result-green); --warning:#B45309; --error:#C0362C; --info:var(--accent);
  --focus-ring:#356fe0;

  /* Dark surface used for the hero + closing (platform navy, not chalkboard green) */
  --hero-bg:#1a2a49;                /* deep platform navy */
  --hero-bg-2:#142138;
  --hero-fg:#eaf0fb;

  /* ---- Typography ---- */
  --font-sans:"Inter","Inter var",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Source Serif 4","Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono","SFMono-Regular","Fira Code",ui-monospace,monospace;
  --font-display:"Inter",var(--font-sans);
  --font-math:"STIX Two Text",var(--font-serif);

  --t-display-xl:clamp(2.6rem,1.6rem + 4.6vw,4.75rem);
  --t-display-l:clamp(2.1rem,1.5rem + 3vw,3.4rem);
  --t-h1:clamp(1.8rem,1.35rem + 2.1vw,2.6rem);
  --t-h2:clamp(1.45rem,1.2rem + 1.2vw,1.95rem);
  --t-h3:clamp(1.1875rem,1.1rem + 0.4vw,1.35rem);
  --t-lead:clamp(1.0625rem,1.02rem + 0.35vw,1.25rem);
  --t-body:clamp(1rem,0.97rem + 0.15vw,1.0625rem);
  --t-body-serif:clamp(1.075rem,1.02rem + 0.35vw,1.2rem);
  --t-small:0.875rem;
  --t-eyebrow:0.78125rem;
  --t-mono:clamp(0.9375rem,0.9rem + 0.15vw,1rem);
  --t-mono-sm:0.84375rem;

  /* ---- Spacing (8-pt, 4px half-step) ---- */
  --s-0:0; --s-05:4px; --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px;
  --s-6:48px; --s-8:64px; --s-10:80px; --s-12:96px; --s-16:128px; --s-20:160px; --s-24:192px;

  /* ---- Grid ---- */
  --container-max:1200px; --container-wide:1320px; --measure:66ch;
  --gutter:24px; --margin-min:24px;

  /* ---- Radius — shared platform scale (tight, engineered) ---- */
  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-full:999px;

  /* ---- Elevation (soft, like the platform's card-elevated) ---- */
  --elev-0:none;
  --elev-1:0 1px 2px rgba(36,52,71,.06), 0 1px 3px rgba(36,52,71,.08);
  --elev-2:0 2px 8px rgba(36,52,71,.08), 0 1px 3px rgba(36,52,71,.05);
  --elev-3:0 12px 32px rgba(36,52,71,.14), 0 4px 10px rgba(36,52,71,.08);

  /* ---- Opacity / borders ---- */
  --o-grid:.05; --o-chalk-dust:.06; --o-disabled:.45;

  /* ---- Motion ---- */
  --dur-1:120ms; --dur-2:180ms; --dur-3:240ms; --dur-4:360ms; --dur-5:600ms; --dur-6:1200ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-chalk:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --stagger:60ms;

  /* ---- Icon ---- */
  --icon-stroke:1.75px;

  /* ---- Z-index ---- */
  --z-sticky-nav:100; --z-dropdown:200; --z-overlay:900; --z-modal:1000;

  color-scheme:light;
}

/* ---- Dark mode (the platform ships a light UI; dark is a website comfort
       option, given equal care — not a naive inversion) ---- */
:root[data-theme="dark"] {
  --surface:#16202e; --surface-paper:#0f1622; --surface-raised:#1a2536; --surface-sunken:#131b27;
  --surface-subtle:#1b2740;
  --border:#243143; --border-strong:#374657; --divider:#243143;
  --text-primary:#e8ecf3; --text-secondary:#b4becc; --text-muted:#7f8c9c;
  --accent:#5e8cf0; --accent-hover:#7aa2f5; --accent-active:#4a7ae6; --accent-soft:#1b2740;
  --reasoning:#7aa2f5; --annotation:#d8a24a;
  --trace-note:#d8a24a; --note-surface:#241d10; --success:#34b37d;
  --hero-bg:#101a2b; --hero-bg-2:#0b1320; --hero-fg:#e8ecf3;
  --elev-1:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
  --elev-2:0 6px 18px rgba(0,0,0,.5);
  --elev-3:0 18px 42px rgba(0,0,0,.6);
  color-scheme:dark;
}