/* ixway marketing site — shared design tokens (v3: the app's Telemetry system, light theme).
   Source of truth: ../ixway/design/telemetry/tokens.json. Read by site.css, hero.css/hero.js and every figure.
   Do not hardcode colors or fonts elsewhere. A dark variant is kept for reference in docs/dark-look/. */
:root {
  /* Night: the hero and closing bands, the app's dark base-200 / base-100. Hex only (hero.js parses fog). */
  --night: #07090d;
  --night-2: #0f131a;
  --night-3: #161b24;      /* dark base-150: fields on night */
  --rule-night: #263040;
  --ink-on-night: #f2f5f8;
  --ink-on-night-2: #8f9bb0;
  --fog-1: #c9d0db;
  --fog-2: #8f9bb0;
  --fog-3: #263040;

  /* Surfaces (light theme) */
  --paper: #eef1f5;        /* base-200: page ground */
  --paper-2: #e3e7ee;      /* base-150: figure fills, table stripes */
  --panel: #ffffff;        /* base-100 */
  --rule: #c9d0db;         /* base-300: hairlines */
  --rule-2: color-mix(in oklab, #c9d0db 45%, #536075); /* figure strokes at rest; not an app token */

  /* Ink */
  --ink: #0a0d12;          /* base-content */
  --ink-2: color-mix(in oklab, #0a0d12 62%, #536075); /* body under headings; not an app token (the app has two text levels) */
  --ink-3: #536075;        /* base-content-muted: captions, labels */

  /* The accent is lime. On a light ground it is a fill only, with an ink edge; as text or a line it is
     olive (primary-text). One element per figure, one phrase per headline, the thing to do. */
  --lime: #c8f031;         /* primary */
  --lime-ink: #0a0d12;     /* primary-content */
  --accent: #4a6600;       /* primary-text: the chosen route, the playhead, the one thing that matters */
  --accent-deep: #4a6600;
  --accent-soft: color-mix(in oklab, #c8f031 35%, #ffffff);

  /* Meanings carried over from the app */
  --warn: #935600;         /* warning: waste, findings, budget burn */
  --warn-soft: color-mix(in oklab, #935600 14%, #ffffff);
  --cloud: #1f5fbf;        /* route-cloud */
  --error: #b81f28;        /* error, on light */
  --error-night: #ff5c5c;  /* error, on night */

  /* Type */
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-figure: var(--font-body);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shape */
  --edge: 1.5px;           /* border-width */
  --r: 6px;                /* radius-field = radius-box */
  --r-sm: 4px;             /* radius-selector: chips, toggles */

  /* Layout */
  --max: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 56px;
}