/*
  Design tokens — derived from DESIGN.md (Mastercard-inspired system),
  adapted for an operational console rather than a marketing page.
  Every value here should trace back to a named color/type/radius in
  DESIGN.md; component CSS should reference these vars, never raw hex.
*/

:root {
  /* --- Color: surfaces --------------------------------------------- */
  --color-canvas: #f3f0ee; /* Canvas Cream — page background */
  --color-canvas-lifted: #fcfbfa; /* Lifted Cream — nested/raised panels */
  --color-surface: #ffffff; /* White — nav pill, cards, chips */
  --color-ink: #141413; /* Ink Black — primary CTAs, headline text, dark frames */

  /* --- Color: text ---------------------------------------------------- */
  --color-text: #141413;
  --color-text-charcoal: #262627;
  --color-text-muted: #696969; /* Slate Gray */
  --color-text-on-ink: #f3f0ee; /* cream, not pure white, on ink surfaces */
  --color-text-on-ink-muted: #d1cdc7; /* Dust Taupe, muted labels on dark frames */

  /* --- Color: signal & ordinal scale ----------------------------------- */
  --color-signal: #cf4500; /* Signal Orange — reserved for alerts/escalation, never marketing CTAs */
  --color-signal-light: #f37338; /* Light Signal Orange — orbital route lines, in-transit accents */
  --color-clay: #9a3a0a; /* Clay Brown */
  --color-link: #3860be; /* Link Blue — informational/agent-thought accents */

  /* Site Type badge palette — one pastel hue per Site Type, additive on top
     of the core Mastercard-inspired palette. Shared across the Site Card
     badge and (later) the Ops Map markers, so a site reads identically in
     both places. Each type has a soft `-*` background and a `-*-strong`
     foreground of the same hue for legible badge text/gauge marks. */
  --color-site-xl: #f2d6c3;
  --color-site-xl-strong: #9a3a0a;
  --color-site-l: #f5e2ab;
  --color-site-l-strong: #8a6112;
  --color-site-m: #d6e8d3;
  --color-site-m-strong: #3f6b46;
  --color-site-s: #d3ddf3;
  --color-site-s-strong: #3860be;

  --color-border: rgba(20, 20, 19, 0.12);
  --color-border-on-ink: rgba(243, 240, 238, 0.18);

  /* --- Overlay surfaces (every panel now floats over the live ink map) ----
     The map is a full-bleed background, so panels can no longer sit on the
     opaque cream canvas — they need their own frosted surface that stays
     legible over moving, muted tiles. Lifted Cream at ~88% opacity + a blur
     keeps text crisp while letting the map read faintly through. */
  --color-glass: rgba(252, 251, 250, 0.88); /* Lifted Cream, frosted overlay */
  --color-glass-border: rgba(255, 255, 255, 0.5); /* soft top-highlight edge */
  --color-glass-ink: rgba(20, 20, 19, 0.66); /* Ink glass — map controls over tiles */

  /* --- Ops-map palette (#15 — softer, warmer "comforting" monotone than
     the original stark high-contrast ink) --------------------------------- */
  --color-map-base: #221d19; /* Warm Charcoal — lighter/warmer than Ink Black so the void behind tiles doesn't read pitch-black */
  --color-marker: #f3f0ee; /* single light ink-tint used by every site pin */

  /* Ink-toned monochrome tile recolor, split into named tokens (#15) so the
     recipe lives in one place instead of a one-off filter string. Applied
     together in components.css as filter: grayscale() invert() etc. */
  --map-tile-grayscale: 1; /* strip all OSM cartographic hue → neutral greys */
  --map-tile-invert: 0.9; /* flip luminance (dark land / light roads), pulled back from a full 1 so the flip isn't a harsh stark negative */
  --map-tile-brightness: 0.9; /* was 0.82 — sits the plate closer to Warm Charcoal instead of sinking toward black */
  --map-tile-contrast: 0.78; /* was 0.9 — softens inverted edges into a hazier, less stark plate */
  --map-tile-sepia: 0.45; /* was 0.35 — more warmth re-added after grayscale/invert */
  --map-tile-hue-rotate: -8deg; /* was -12deg — a gentler pull, keeps the warm end of the rotation instead of drifting toward slate */
  --map-tile-saturate: 0.55; /* was 0.6 — kept low; still tonal/monotone, not a multi-color scheme */

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Sofia Sans", "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* --- Radius scale (deliberately no 8-16px middle ground) ------------- */
  --radius-chip: 6px;
  --radius-button: 20px;
  --radius-signal: 24px;
  --radius-stadium: 40px;
  --radius-pill: 999px;
  /* Explicit exception (#22): the Agent Timeline frame (.console-frame) is a
     mostly-rectangular data panel, not a hero/button shape, and its own
     child content (tool cards, email docs) already sits in the 6-20px
     range — the stadium radius read as inconsistent against them. */
  --radius-frame: 8px;

  /* --- Shadow (atmospheric cushioning, never hard-edged) ---------------- */
  --shadow-1: rgba(0, 0, 0, 0.04) 0px 4px 24px 0px;
  --shadow-2: rgba(0, 0, 0, 0.08) 0px 24px 48px 0px;

  /* --- Header height (#21) -----------------------------------------------
     Set from real layout (ResizeObserver in public/js/components/nav.js),
     not a hardcoded magic number — this fallback only covers the instant
     before that first measurement lands. Panels pinned below the header
     read this instead of guessing its height. */
  --nav-height: 64px;

  /* --- Left pane width (#16, drag-resizable per #26) ---------------------- */
  --transfers-strip-width: clamp(340px, 27vw, 420px); /* default until dragged */

  /* --- Space (8px scale) ------------------------------------------------ */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
}