/* ════════════════════════════════════════════════════════════════════════════════
   DataFirst — CANONICAL DESIGN TOKENS  (single source of truth, both surfaces import)
   Locked spec: Docs/quant-desk/design-overhaul/00-DESIGN-SYSTEM-SPEC.md
   This file holds: @font-face (self-hosted) · the :root token superset · the safe
   additive base (body / numeric law / heading routing / reduced-motion). Component
   recipes are applied per-surface (Wave 2) to avoid clobbering existing class systems.
   HONESTY RAILS: --long=GREEN, --short=RED, --call→--long, --put→--short are LOCKED.
   Theming recolors CHROME only; never the data semantics.

   REBASED 2026-08-24 onto the live DataFirst Terminal palette (dft-terminal src/tokens.ts,
   itself Tradesea-rebased 2026-07-29). The neutral ramp lost its blue cast and became true
   greys, and --edge moved #23272F → #292A2C, which is the contrast fix: the old hairline sat
   ~1.4:1 on the ground and dissolved. Data hues moved WITH the terminal (--long #16C784 →
   #00BB9C, --short #EA3943 → #F23645, --warn #F0B90B → #FFC20A) — the rails still hold, green
   is still green and red is still red; only the hue was restated so both surfaces agree.
   --accent #1F8FFF was already correct and did not move. UI face is Inter, matching the
   terminal since 2026-07-29. All 190 academy figures were swept to the same values.
   — Benjamin Rodriguez
   ════════════════════════════════════════════════════════════════════════════════ */

/* ─── self-hosted variable fonts (no CDN dependency on a trading box) ─── */
@font-face{ font-family:"Inter Variable"; src:url(fonts/InterVariable.woff2) format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Geist"; src:url(fonts/GeistVariable.woff2) format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Geist Mono"; src:url(fonts/GeistMonoVariable.woff2) format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"JetBrains Mono"; src:url(fonts/JetBrainsMonoVariable.woff2) format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap; }

:root{
  /* ═══════════ COLOR — calm near-black ramp (LOCKED hues; alpha = magnitude) ═══════════ */
  --canvas:#0F0F0F;            /* chart background — darkest plane, data sits on it */
  --bg:#111112;                /* app background — one step up from canvas */
  --surface:#131314;           /* panels / docks — where chrome lives */
  --surface-2:#171719;         /* raised within a panel (headers, active rows, popovers) */
  --surface-3:#1F2022;         /* highest interactive surface (hover-on-raised, menus) */
  --edge:#292A2C;              /* hairline divider — 1px, the default border */
  --edge-2:#36393C;            /* emphasis border (hover / focus-within frame) */
  --scrim:rgba(15,15,15,.66);     /* modal/popover backdrop */

  /* text ramp — two-tier law: dim label, bright value. Each role its OWN token. */
  --txt:#FAFAFA;               /* primary — values, the number the eye lands on */
  --dim:#979BA4;               /* secondary — labels, group names, table headers */
  --faint:#7F838B;             /* tertiary — micro-labels, provenance, separators */
  --disabled:#5A5D63;          /* its own token (don't overload --faint) */
  --txt-on-accent:#06080C;     /* text on a filled accent/long/short chip (near-black) */

  /* LOCKED semantic colors — hue = direction; do NOT theme away, do NOT re-hue */
  --accent:#1F8FFF;            /* THE one accent — selection / focus / links / interactive */
  --accent-2:#5BA8FF;          /* accent hover/lift only (never a second brand color) */
  --accent-soft:rgba(31,143,255,.10);
  --long:#00BB9C;              /* up / long / call-side — GREEN LOCKED (the ONE green) */
  --short:#F23645;             /* down / short / put-side — RED LOCKED (the ONE red) */
  --warn:#FFC20A;              /* amber — degraded/offline/fragile/risk; sparingly (the ONE amber) */
  --long-soft:rgba(0,187,156,.12);
  --short-soft:rgba(242,54,69,.12);
  --warn-soft:rgba(255,194,10,.12);
  --line:#9AA7B8;              /* neutral structural chart line (magnet rays) — tested-luminance */
  /* Call=GREEN / Put=RED honesty rail — aliases so dashboard.html selectors survive migration */
  --call:var(--long);  --put:var(--short);
  --pos:var(--long);   --neg:var(--short);
  --gold:var(--warn);          /* gold folds INTO warn — there is no second accent */

  /* focus + glow (functional only — no decorative neon) */
  --glow:rgba(31,143,255,.15);
  --focus:0 0 0 1px var(--canvas), 0 0 0 3px rgba(31,143,255,.45);  /* double-ring on dark */

  /* options dealer-positioning layer (df-options.js) — sourced to locked hues */
  --opt-flip:var(--warn);
  --opt-call-zone:rgba(242,54,69,.16);   /* call wall — fade-up resistance (→ --short) */
  --opt-put-zone:rgba(0,187,156,.16);   /* put wall — fade-down support (→ --long) */
  --opt-0dte-accent:#C77DFF;             /* 0DTE rows — the ONE defensible non-core violet, tokenized */
  --regime-long:var(--long); --regime-short:var(--short); --regime-fragile:var(--warn);

  /* grade pills — HONESTY RAILS, fixed mapping, never themed.
     Grade-color is DELIBERATELY desaturated from direction so a PROVEN short never flashes green. */
  --grade-proven:var(--long);     --grade-proven-bg:var(--long-soft);
  --grade-credible:var(--accent); --grade-credible-bg:var(--accent-soft);
  --grade-folklore:var(--warn);   --grade-folklore-bg:var(--warn-soft);
  --grade-debunked:var(--faint);  --grade-debunked-bg:rgba(82,91,102,.12);

  /* ═══════════ SPACING — 4px base, strict scale (kills the 271 raw px) ═══════════ */
  --s-1:2px; --s-2:4px; --s-3:6px; --s-4:8px; --s-5:10px;
  --s-6:12px; --s-8:16px; --s-10:20px;
  --s-12:24px; --s-16:32px; --s-20:40px;
  --gutter:var(--s-8);         /* page gutter == grid gap (16px) so card edges align */
  --pad-panel:var(--s-6);      /* default panel padding (12px) */
  --pad-cell:var(--s-2) var(--s-3); /* default data-cell padding (4/6) */

  /* ═══════════ TYPE — one family per ROLE (kills Inter-as-everything) ═══════════ */
  --ui:"Inter Variable","Inter","Geist",-apple-system,"Segoe UI",Roboto,sans-serif;
  --head:"Inter Variable","Inter","Geist",system-ui,sans-serif;   /* display face — headings ONLY */
  --mono:"JetBrains Mono","Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* size scale — dense-terminal floor, 9–26px working band */
  --fz-micro:9px;   /* uppercase micro-labels, axis ticks, provenance */
  --fz-2xs:10px;    /* table th, dist chips, age chips */
  --fz-ctrl:11px;   /* buttons / controls / sub copy */
  --fz-body:13px;   /* body / default / table td / READ copy */
  --fz-lede:15px;   /* panel title / card h3 / brand wordmark / plan line */
  --fz-head:19px;   /* section headline / loading */
  --fz-hero:26px;   /* THE READ headline verdict — the ONLY place type goes this big */

  /* WEIGHTS — headings NEVER 700+ on body */
  --w-reg:420; --w-med:520; --w-semi:600; --w-bold:680;

  /* LINE-HEIGHTS */
  --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.45;

  /* LETTER-SPACING (rises as size falls; tabular numbers NEVER tracked) */
  --ls-micro:.08em; --ls-label:.04em; --ls-hero:-.015em; --ls-tnum:0;

  /* ═══════════ RADIUS — SHARP (chrome never 16+) ═══════════ */
  --r-1:4px; --r-2:6px; --r-3:8px; --r-4:14px; --r-pill:999px;
  --radius:8px;                /* legacy alias (dashboard.html used --radius:14px) → canonical card r */

  /* ═══════════ ELEVATION — surface ladder in-grid; LAYERED shadow floating-only ═══════════ */
  --el-1:0 1px 2px rgba(0,0,0,.40);
  --el-float:
    0 0 0 1px rgba(255,255,255,.06),
    0 8px 24px -4px rgba(0,0,0,.55),
    0 16px 48px -8px rgba(0,0,0,.65),
    inset 0 1px 0 0 rgba(255,255,255,.05);
  --el-modal:
    0 0 0 1px rgba(255,255,255,.08),
    0 24px 64px -12px rgba(0,0,0,.70),
    0 12px 32px -8px rgba(0,0,0,.50),
    inset 0 1px 0 0 rgba(255,255,255,.06);

  /* ═══════════ MOTION — durations + named easing (Stripe/Linear curves) ═══════════ */
  --dur-1:90ms; --dur-2:140ms; --dur-3:180ms; --dur-4:240ms; --flash:420ms;
  --ease-out:cubic-bezier(.16,1,.3,1);     /* expo-out — things ARRIVING */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* things MOVING between two states */
  --ease-std:cubic-bezier(.4,0,.2,1);      /* micro hover/tint */
  --mo:var(--dur-2) var(--ease-std);       /* legacy alias (df-chart.js references it) */

  /* ═══════════ Z-LADDER & SHELL GEOMETRY (existing) ═══════════ */
  --z-chart:1; --z-dock:20; --z-overlay:40; --z-modal:60; --z-toast:80;
  --rdock-w:0px; --rdock-open:360px; --rail-w:42px;
}

/* ─── safe additive base (surfaces remove their own conflicting body/font rules) ─── */
body{
  font-family:var(--ui);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* THE numeric law — every price/size/$/tick/%/Greek/clock. Slashed zero: 0 vs O is catastrophic. */
.num,.price,.ticker,.tape,td.value,.greek,.dist,.kpi .v{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"zero" 1,"ss03" 1;
  letter-spacing:var(--ls-tnum);
}
/* heading face routing — headings use the display cut, never plain Inter body */
.panel-title,.brand,.dfword,.rposture{ font-family:var(--head); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition-duration:1ms!important; }
}