/* ============================================================================
   STORM OS · DESIGN TOKENS · v2.0 — "Daylight"
   Supersedes the Brand Identity Kit v1.1 §09 palette and type (see ADR-12).
   The v1 system was a stock utility-framework ramp — slate greys, indigo-600,
   a wonky display serif — dressed in dark chrome. It read heavy and generic.
   v2 is built for light: a cool navy ink ramp, one bright saturated brand
   blue, three separated motion hues, and a semantic set that means exactly
   one thing each — green good, amber neutral, red bad. Nothing decorative.
   This file is shared verbatim between the demo, the marketing site, and the
   full application build. Nothing is styled by hand twice.
   ========================================================================== */

:root{
  /* ————————————————————————————————————— ink · cool navy neutrals
     Built on a light canvas, not against a dark one. Contrast on white is
     annotated because it is a promise, not an accident. */
  --sos-ink-950:#061529;
  --sos-ink-900:#0B1E3C;   /* headings, chrome ink            · 15.9:1 */
  --sos-ink-800:#16294A;
  --sos-ink-700:#2C3E5C;   /*                                 · 10.4:1 */
  --sos-ink-600:#45566F;   /* body text                       ·  7.5:1 */
  --sos-ink-500:#67788F;   /* muted / secondary               ·  4.9:1 */
  --sos-ink-400:#93A1B5;   /* faint · icons, chevrons, tracks ·  2.9:1 */
  --sos-ink-300:#CBD5E3;   /* strong borders, dividers */
  --sos-ink-200:#E4E9F1;   /* borders */
  --sos-ink-100:#EFF3F9;   /* fills, bar tracks */
  --sos-ink-50:#F6F8FC;    /* canvas */
  --sos-white:#FFFFFF;

  /* ————————————————————————————————————— brand · Storm Blue
     Bright, saturated, unmistakably "go". Passes AA on white at 5.1:1, so it
     may set text as well as fill. */
  --sos-brand-800:#032F8F;
  --sos-brand-700:#0448CC;  /* pressed, brand text on tint */
  --sos-brand-600:#0A5FFF;  /* THE primary                    ·  5.1:1 */
  --sos-brand-500:#3D82FF;
  --sos-brand-200:#B8D2FF;
  --sos-brand-100:#D9E7FF;
  --sos-brand-50:#EFF5FF;

  /* accent · Bolt Cyan — focus rings, the Eye of the mark, progress */
  --sos-accent-600:#0092B8;
  --sos-accent-500:#00BEE8;
  --sos-accent-100:#D3F3FC;

  /* ————————————————————————————————————— the three motions · NEVER themed
     Separated by hue, not by lightness, so they hold at chip size. Each
     carries an -ink variant for text on light fills. */
  --sos-motion-customer:#0A5FFF;      --sos-motion-customer-ink:#0448CC;
  --sos-motion-investor:#00809F;      --sos-motion-investor-ink:#026C8A;
  --sos-motion-partner:#7A3EF5;       --sos-motion-partner-ink:#5B21D6;
  --sos-customer:var(--sos-motion-customer);
  --sos-investor:var(--sos-motion-investor);
  --sos-partner:var(--sos-motion-partner);

  /* ————————————————————————————————————— semantics · one meaning each
     GREEN = good/positive. AMBER = neutral/needs a look. RED = bad/negative.
     Never used categorically, never for decoration. */
  --sos-signal-600:#12B76A;  --sos-signal-700:#067647;   /* good     */
  --sos-signal-100:#D3F5E3;  --sos-signal-50:#E9F9F1;
  --sos-risk-600:#F79009;    --sos-risk-700:#B54708;     /* neutral  */
  --sos-risk-100:#FDECC8;    --sos-risk-50:#FEF6E7;
  --sos-lost-600:#F04438;    --sos-lost-700:#B42318;     /* negative */
  --sos-lost-100:#FEDBD8;    --sos-lost-50:#FEECEB;
  --sos-signal:var(--sos-signal-600);
  --sos-risk:var(--sos-risk-600);

  /* — normative semantic aliases — */
  --sos-color-anchor:var(--sos-ink-900);
  --sos-color-primary:var(--sos-brand-600);
  --sos-color-accent:var(--sos-accent-600);
  --sos-color-accent-ink:var(--sos-motion-investor-ink);
  --sos-color-surface:var(--sos-ink-50);
  --sos-color-surface-raised:var(--sos-white);
  --sos-color-fill-soft:var(--sos-brand-50);
  --sos-color-fill-info:#E4F7FD;
  --sos-color-fill-partner:#F2ECFE;
  --sos-color-text:var(--sos-ink-600);
  --sos-color-text-muted:var(--sos-ink-500);
  --sos-color-border:var(--sos-ink-200);
  --sos-color-success:var(--sos-signal-700);
  --sos-color-warning:var(--sos-risk-700);
  --sos-color-danger:var(--sos-lost-700);

  /* — legacy scale aliases · v1 names kept so nothing styles twice — */
  --sos-slate-900:var(--sos-ink-900); --sos-slate-800:var(--sos-ink-800);
  --sos-slate-700:var(--sos-ink-700); --sos-slate-600:var(--sos-ink-600);
  --sos-slate-500:var(--sos-ink-500); --sos-slate-400:var(--sos-ink-400);
  --sos-slate-300:var(--sos-ink-300); --sos-slate-200:var(--sos-ink-200);
  --sos-slate-100:var(--sos-ink-100); --sos-slate-50:var(--sos-ink-50);
  --sos-indigo-800:var(--sos-brand-800); --sos-indigo-700:var(--sos-brand-700);
  --sos-indigo-600:var(--sos-brand-600); --sos-indigo-500:var(--sos-brand-500);
  --sos-indigo-100:var(--sos-brand-100); --sos-indigo-50:var(--sos-brand-50);
  --sos-sky-700:var(--sos-motion-investor-ink); --sos-sky-500:var(--sos-accent-500);
  --sos-sky-100:var(--sos-accent-100); --sos-bolt-mist:var(--sos-color-fill-info);
  --sos-violet-700:var(--sos-motion-partner-ink); --sos-violet-600:var(--sos-motion-partner);
  --sos-violet-mist:var(--sos-color-fill-partner);
  --sos-won-50:var(--sos-signal-50); --sos-won-200:var(--sos-signal-100);
  --sos-won-600:var(--sos-signal-600);
  --sos-risk-200:var(--sos-risk-100);
  --sos-lost-200:var(--sos-lost-100);
  --sos-thunder:var(--sos-ink-900); --sos-ink:var(--sos-ink-900);

  /* ————————————————————————————————————— type
     One grotesk family, two cuts: Inter Tight sets every headline (tight,
     confident, grown-up); Inter sets everything you read. IBM Plex Mono is
     the numeral voice — money, refs, counts — and never body copy. */
  --sos-font-display:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sos-font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sos-font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --font-head:var(--sos-font-display);
  --font-mono:var(--sos-font-mono);
  --sos-track-display:-0.021em;
  --sos-track-kicker:0.075em;

  /* ————————————————————————————————————— geometry */
  --sos-radius:10px;
  --sos-space-unit:4px;
  --sos-focus-ring:2px solid var(--sos-color-accent);
  --sos-focus-offset:2px;
  --sos-touch-min:44px;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;
  --s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;--s-20:80px;--s-24:96px;
  --r-6:6px;--r-10:10px;--r-14:14px;--r-pill:999px;--r-xs:4px;

  /* elevation · light and layered. Shadows tint navy, never black, so they
     read as air rather than smudge. */
  --sh-rest:0 1px 2px rgba(11,30,60,.05),0 1px 1px rgba(11,30,60,.03);
  --sh-card:0 1px 3px rgba(11,30,60,.06),0 1px 2px rgba(11,30,60,.04);
  --sh-lift:0 8px 20px -6px rgba(11,30,60,.13),0 2px 6px -2px rgba(11,30,60,.07);
  --sh-over:0 20px 44px -12px rgba(11,30,60,.2),0 6px 14px -6px rgba(11,30,60,.09);
  --sh-brand:0 4px 12px -2px rgba(10,95,255,.28);

  /* motion */
  --t-fast:150ms;--t-base:180ms;--t-slow:200ms;
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease:var(--ease-out);

  /* ============================================================================
     THEME ENGINE CONSUMABLES (§17)
     The tenant owns the colors; Storm OS owns the behavior. Chrome is light by
     construction and stays light under every tenant theme — the tenant primary
     colors the *active* state, never the frame.
     ========================================================================== */
  --tk-primary:var(--sos-color-primary);
  --tk-primary-hover:var(--sos-brand-700);
  --tk-primary-pressed:var(--sos-brand-800);
  --tk-primary-soft:var(--sos-brand-50);
  --tk-primary-soft-border:var(--sos-brand-200);
  --tk-accent:var(--sos-color-accent);
  --tk-surface:var(--sos-color-surface);
  --tk-anchor:var(--sos-color-anchor);
  --tk-anchor-raised:var(--sos-ink-800);
  --tk-chrome:var(--sos-white);
  --tk-chrome-border:var(--sos-ink-200);
  --tk-radius:var(--sos-radius);
  --tk-fs-body:15px;
  --tk-fs-small:13.5px;
  --tk-font-head:var(--sos-font-display);
  --tk-font-body:var(--sos-font-body);
  --tk-focus-ring:2px solid var(--tk-accent);
}