/* ============================================================================
   QCI UI · qci-tokens.css — the ONE design-token layer. v1 (frozen).
   Every product stylesheet MUST consume these tokens and MUST NOT redefine
   raw hex colours of its own. No raw hex outside this file (map style JSON
   is the single documented exception).
   Brand: Quantum Commodity Intelligence. Aesthetic: a calm, premium trading
   terminal — dark, dense where it matters, generous where it breathes.

   ACCENT IS PRODUCT-SETTABLE. --accent ships with a neutral default and is
   NOT a brand colour: FLARE orange (#e8701c) is deliberately NOT hardcoded
   here. Each app sets its own accent in its app stylesheet, e.g.
     :root { --accent: #e8701c; --accent-2: #eda85a;
             --accent-glow: rgba(232,112,28,.15); }
   Lineage: flare-lite/static/css/theme.css (token layer, severity system)
   merged with honk/static/css/honk.css (spacing scale, hot/cold + up/down
   semantic pairs). Load order: qci-base.css (optional reset) -> this file
   -> app styles.
   ========================================================================== */

:root {
  /* ---- surfaces (near-black, cool) ---- */
  --bg:            #070a0f;   /* page */
  --bg-1:          #0b0f16;   /* rails / sections */
  --bg-2:          #11161f;   /* cards */
  --bg-3:          #171d28;   /* raised within card */
  --bg-hover:      #1b2230;
  --scrim:         rgba(4,6,10,.72);

  /* ---- hairlines ---- */
  --line:          #1d2533;
  --line-soft:     #161c27;
  --line-strong:   #2b3850;

  /* ---- text ---- */
  --ink:           #eef2f8;   /* primary */
  --ink-2:         #aeb9cb;   /* secondary */
  --ink-3:         #8a95a8;   /* muted / captions — meets WCAG AA (~5.5:1) on bg */
  --ink-4:         #7a8398;   /* faint — AA (~4.8:1) on the main surfaces */

  /* ---- accent (PRODUCT-SETTABLE — see header; neutral default) ---- */
  --accent:        #6b7891;   /* deliberately quiet until a product claims it */
  --accent-2:      #8a97b0;
  --accent-glow:   rgba(107,120,145,.15);

  /* ---- severity / signal ---- */
  --high:          #ff3b4f;   /* severity High */
  --high-bg:       rgba(255,59,79,.12);
  --med:           #ff9d2b;   /* severity Medium */
  --med-bg:        rgba(255,157,43,.12);
  --low:           #f0c948;   /* severity Low */
  --low-bg:        rgba(240,201,72,.10);
  --calm:          #2dd4a0;   /* nominal / routine / good */
  --calm-bg:       rgba(45,212,160,.10);
  --info:          #4d9bff;   /* links / map / neutral data */
  --info-bg:       rgba(77,155,255,.12);
  --dark-state:    #8b7fe8;   /* "gone dark" / went-quiet */
  --dark-state-bg: rgba(139,127,232,.12);
  --star:          #ffcf4a;   /* watchlist star (not a severity colour) */

  /* ---- direction: up / down vs prior (from HONK) ---- */
  --up:            #30b879;
  --up-bg:         rgba(48,184,121,.14);
  --down:          #f25c6e;
  --down-bg:       rgba(242,92,110,.14);
  --flat:          #9aa4b2;   /* no meaningful move */

  /* ---- temperature: hot / cold vs normal (from HONK) ---- */
  --hot:           #ff7a4d;   /* running above norm */
  --hot-bg:        rgba(255,122,77,.16);
  --cold:          #45c2e0;   /* running below norm */
  --cold-bg:       rgba(69,194,224,.16);

  /* ---- data viz furniture ---- */
  --spark:         #ff9d2b;
  --grid:          #1a2230;

  /* ---- type ---- */
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  --fs-display: clamp(28px, 4.4vw, 46px);
  --fs-h1:   24px;
  --fs-h2:   18px;
  --fs-body: 14.5px;
  --fs-sm:   13px;
  --fs-xs:   11.5px;
  --fs-mono-num: 15px;
  --tracking-cap: .10em;   /* for UPPERCASE eyebrow labels */

  /* ---- spacing (4px base, from HONK) ---- */
  --space-0_5: 2px;  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;   --space-6: 24px;  --space-8: 32px;  --space-12: 48px;
  --space-16: 64px;

  /* ---- shape & depth ---- */
  --r-sm: 2px;
  --r:    4px;
  --r-lg: 7px;
  --r-pill: 999px;
  --shadow-1: 0 1px 0 rgba(255,255,255,.015);
  --shadow-2: 0 16px 44px -28px rgba(0,0,0,.85);
  --shadow-pop: 0 22px 60px -26px rgba(0,0,0,.92);

  /* ---- motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .14s;
  --t: .26s;
  --t-slow: .5s;

  /* ---- layout ---- */
  --maxw: 1240px;
  --rail-w: 392px;
  --header-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Severity helper classes — set --sev / --sev-bg so components stay generic. */
.sev-high   { --sev: var(--high); --sev-bg: var(--high-bg); }
.sev-medium { --sev: var(--med);  --sev-bg: var(--med-bg);  }
.sev-low    { --sev: var(--low);  --sev-bg: var(--low-bg);  }
.sev-none,
.sev-calm   { --sev: var(--calm); --sev-bg: var(--calm-bg); }
.sev-dark   { --sev: var(--dark-state); --sev-bg: var(--dark-state-bg); }

/* Direction + temperature helpers — same --sev channel, so one .pill serves
   severities, moves and vs-normal temperature alike. */
.dir-up     { --sev: var(--up);   --sev-bg: var(--up-bg);   }
.dir-down   { --sev: var(--down); --sev-bg: var(--down-bg); }
.dir-flat   { --sev: var(--flat); --sev-bg: var(--bg-3);    }
.tmp-hot    { --sev: var(--hot);  --sev-bg: var(--hot-bg);  }
.tmp-cold   { --sev: var(--cold); --sev-bg: var(--cold-bg); }

/* The numeric/uppercase eyebrow used throughout (labels above values) */
.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Shared pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 7px; border-radius: 2px;
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  background: var(--sev-bg, var(--bg-3)); color: var(--sev, var(--ink-2));
  border: 1px solid color-mix(in srgb, var(--sev, var(--line-strong)) 36%, transparent);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}