/* EarlyBird design tokens — the ONE place a colour, size or radius is written.
 *
 * Served at /tokens.css and linked by both the production mini app and the dev
 * build, the same way /card.js is one file serving both. Nothing else in the
 * app may contain a colour literal: card.js, dev.html and mini-app-v1.html all
 * reference these names, so a change here reaches every surface at once.
 *
 * Taken from the hi-fi mockup (EarlyBird.pdf, 2026-09-05). The mockup is dark
 * only, so this is dark only — the previous light palette had no design behind
 * it and no screen was ever drawn against it.
 */
:root {
  /* ---- ground ---- */
  --bg:            #0A0A0A;   /* page behind everything */
  --surface-1:     #0A0A0A;   /* body; kept as an alias so existing rules hold */
  --surface-2:     #161616;   /* cards, tiles, raised things */
  --surface-3:     #1E1E1E;   /* a tile on a card */
  --border:        #262626;
  --fill-ghost-selected: #1F1F1F;

  /* ---- type ---- */
  --text:           #F2F2F2;
  --text-secondary: #B4B4B4;
  --text-muted:     #8A8A8A;
  /* A third text level, for a tile's sub-line under an already-muted label.
     Taken from the 2026-09-06 design, which used it well and which the system
     had no equivalent for. */
  --text-faint:     #605D57;

  /* ---- accent ---- */
  --accent:      #F5A623;
  --accent-dark: #C8801A;
  /* Tinted accent for a chip or pill that should read as accent without
     shouting. Same source. */
  --accent-bg:   rgba(245, 166, 35, 0.14);

  /* ---- verdict chips ---- */
  --chip-open-bg:        #1C3A2A;
  --chip-open-text:      #5BD48B;
  --chip-busy-bg:        #3A2F14;
  --chip-busy-text:      #E0B04A;
  --chip-saturated-bg:   #3A1C1C;
  --chip-saturated-text: #E06060;
  --chip-none-bg:        #1F1F1F;
  --chip-none-text:      #8A8A8A;

  /* Semantic aliases the card already uses for direction arrows and lines.
     They point at the chip palette so a rising arrow and an OPEN chip are the
     same green, rather than two greens that nearly match. */
  --text-success: var(--chip-open-text);
  --bg-success:   var(--chip-open-bg);
  --text-danger:  var(--chip-saturated-text);

  /* ---- graph ---- */
  --line-ratio:    #F2F2F2;   /* ratio strip: the headline series, white */
  --line-sold:     #F5A623;   /* sold strip: accent */
  --line-listings: #8A8A8A;   /* listings strip: muted, SOLID */
  --line-2:        #8A8A8A;   /* legacy alias */
  --zone-alpha:    0.10;

  /* ---- shape and rhythm ---- */
  --radius:    10px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --tap: 44px;                /* minimum tap target */
  /* The one side gutter. Every surface reads this rather than picking its own
     inset, so the app's left edge is a single number to change. */
  --gutter: 16px;

  /* ---- fonts ---- */
  --font-sans: Inter, "SF Pro Text", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* ---- type scale. Nothing below 11px: this is read on a phone outdoors. ---- */
  --fs-micro:   11px;         /* micro labels, mono, uppercase */
  --fs-small:   12px;
  --fs-body:    14px;
  --fs-value:   17px;         /* a tile's number */
  --fs-term:    17px;         /* a row's term name */
  --fs-head:    34px;         /* the open card's headline number */
  --fs-count:   40px;         /* the WATCHING count */
}