/* Stowit design tokens — v0.2, the light shell.
   Source of truth: project/docs/DESIGN.md §1 Palette, §2 Type.
   Every value here is verbatim from the doc; do not "improve" a hex. */

:root {
  /* ── Shell ─────────────────────────────────────────────────────────── */
  --paper-warm: #FDFAF4;   /* app + card background (default) */
  --paper-cool: #FBFDFF;   /* the Proof, data-dense panels */
  --ink: #0B1220;          /* all primary text, the mark's counter */

  --ink-muted-warm: #6B6558;
  --ink-muted-cool: #5B6B82;
  --ink-faint-warm: #A19B8C;
  --ink-faint-cool: #8496AC;
  --hairline-warm: #EDE6D9;
  --hairline-cool: #E7EEF6;
  --surface-sunk-warm: #F2EBDD;
  --surface-sunk-cool: #EDF3F9;

  /* Dark is retained for exactly one surface: the marketing hero.
     Do not build app UI on dark. */
  --shell-dark: #0B1220;
  --shell-dark-sunk: #12203A;  /* the vault, on dark */
  --ink-on-dark: #FDFAF4;
  --ink-muted-on-dark: #A9BBD2;
  --ink-faint-on-dark: #93A6C0;
  --mono-on-dark: #6E86A6;

  /* ── Sun, sea, hull ────────────────────────────────────────────────── */
  --sun: #FFC94A;
  --sun-glow-soft: rgba(255, 201, 74, .22);
  --sun-glow-bloom: rgba(255, 201, 74, .30);
  --sun-glow-bloom-out: rgba(255, 201, 74, 0);
  --sun-dim: #F3E3B4;      /* standing by — the sun goes quiet */

  /* The brand blue: the "it" in stowit, and the water. One value — if these
     ever drift apart the wordmark stops matching the illustration. */
  --brand-blue: #4C97EE;

  --sea: var(--brand-blue);
  --sea-pale: #7FB6F2;     /* a lighter tint of the same blue */
  --sea-deep: #3987e5;     /* foreground water in the dark hero (v0.1 blue) */
  --sea-night: #1E4E8C;    /* back water band, dark hero */
  --sea-grey: #CFDDE4;     /* standing by */
  --sky-light: #EAF4FB;
  --sky-grey: #F1F0EA;     /* standing by */

  --hull: #FFFFFF;
  --hull-warm: #FDFAF4;
  --deck-1: #FFB020;       /* upper deck stripe */
  --deck-2: #E07A1F;       /* lower deck stripe */
  --deck-1-dim: #E8C58C;   /* standing by */
  --deck-2-dim: #D8AE79;
  --cargo-dim: #CFCBBD;

  --vault-light: #DCE6F0;
  --vault-dark: #12203A;
  --vault-unplugged: #C9C4B4;

  --cloud: rgba(253, 250, 244, .10);
  --cloud-faint: rgba(253, 250, 244, .07);
  --cloud-mid: rgba(253, 250, 244, .09);

  /* ── Semantic ──────────────────────────────────────────────────────── */
  --verified-dot: #2FB57F;
  --verified-text: #1F9E6B;
  --verified-soft: #2FA36F;
  --verified-bg: #E6F7EF;
  --warn-quiet-bg: #FDE8CE;
  --warn-quiet-text: #8A3B12;
  --note-bg: #FFF3D6;
  --note-text: #8A5A08;

  /* ── Artifact classes — fixed order, never cycled ──────────────────── */
  /* The order is CLASS_ORDER in stowit-scan/src/autopsy.rs.
     Labels always wear ink, never series colour. */
  --class-node-modules: var(--brand-blue);
  --class-rust-target: #EE7343;
  --class-python-venv: #22B587;
  --class-derived-data: #E0A315;
  --class-model-cache: #E4699A;
  --class-dormant: #35A335;
  /* Appended, never inserted — the order IS the colour assignment, so inserting
     one recolours every chart and every share card already in the wild.
     Placed in the two widest hue gaps (265 and 190) and checked by CIELAB
     distance: each is >= 39 dE from its nearest neighbour, versus a
     tightest-existing-pair of 34.4. See class_color() in stowit-cli/src/brand.rs
     — if you change one, change both. */
  --class-package-cache: #7B57D4;
  --class-xcode-support: #178FA8;
  /* Ninth, appended. Picked by measuring CIELAB distance to the other eight
     (min 51.9 dE, against a tightest-existing-pair of 34.4), not by eye. */
  --class-build-cache: #807146;

  /* Scenario harbours, the Proof */
  --harbour-a: #EAF4FB;
  --harbour-a-label: #2172C6;
  --harbour-b: #FDEDF3;
  --harbour-b-label: #C0447A;
  --harbour-c: #FFF6DF;
  --harbour-c-label: #8A5A08;

  /* ── Water ────────────────────────────────────────────────────────── */
  /* One period of a gentle swell; tiles seamlessly (same y at both ends). */
  --wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='380' height='40' viewBox='0 0 380 40' preserveAspectRatio='none'><path d='M0,20 C47,2 143,2 190,20 C237,38 333,38 380,20 L380,40 L0,40 Z' fill='%23000'/></svg>");

  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --r-slice: 6px;
  --r-button: 8px;
  --r-card: 12px;
  --r-panel: 14px;
  --r-scenario: 16px;
  --r-chip: 999px;

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --shadow-panel: 0 8px 26px rgba(11, 18, 32, .16);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .12);
  --shadow-card-strong: 0 1px 3px rgba(0, 0, 0, .14);
  --shadow-hull: 0 2px 6px rgba(11, 18, 32, .10);
}

/* Type scale — DESIGN.md §2. Applied as classes so surfaces stay literal. */
.t-hero-headline { font: 800 52px/1.04 var(--font-sans); letter-spacing: -1.8px; }
.t-hero-deck     { font: 400 16.5px/1.55 var(--font-sans); }
.t-card-number   { font-weight: 800; letter-spacing: -2.2px; line-height: 1; }
.t-panel-number  { font: 800 38px/1 var(--font-sans); letter-spacing: -1.4px; }
.t-stat-number   { font: 800 22px var(--font-sans); letter-spacing: -.8px; }
.t-section-label { font: 700 12px var(--font-sans); letter-spacing: 1.5px; }
.t-row-title     { font: 600 14.5px var(--font-sans); }
.t-row-meta      { font: 400 12.5px var(--font-sans); }
.t-body          { font: 400 13.5px/1.5 var(--font-sans); }
.t-mono          { font: 400 11.5px var(--font-mono); }