/* ==========================================================================
 * QTS5 Design Tokens — locked. DO NOT inline-redefine in pages.
 *
 * Single source of truth for the trading UI colour + typography palette.
 * Pages reference via:
 *
 *     <link rel="stylesheet" href="_design_tokens.css">
 *
 * This file is intentionally token-only — no layout, no component CSS.
 * Components live in their owning page or a future shared component file.
 *
 * Banned anywhere in docs/*.html (lint-enforced by
 * tests/test_ui_design_system.py and scripts/check_ui_design_system.sh):
 *
 *   - Pure black bg (#000)              → use var(--bg) #020408
 *   - Gold (#FFD700, #D4AF37, #FFC700)  → forbidden brand colour
 *   - Open-Dyslexic font family         → forbidden, accessibility regress
 *   - Grid background images             → forbidden, only stars canvas
 *
 * Canonical nav: see docs/nav.js (11-tab cluster, S136).
 *
 * S130-C-UI-GODMODE — v4.6.87.
 * ========================================================================== */

:root {
  /* Surface */
  --bg: #020408;                       /* near-black, never #000 */

  /* Text — three-tier luminosity */
  --t1: rgba(255, 255, 255, 0.88);     /* primary text */
  --t2: rgba(255, 255, 255, 0.55);     /* secondary text */
  --t3: rgba(255, 255, 255, 0.18);     /* decorative only — borders, subtle labels */

  /* Structure */
  --s1: rgba(255, 255, 255, 0.03);     /* raised surface / nav bg */
  --t4: rgba(255, 255, 255, 0.07);     /* hover / inset highlight */
  --rule: rgba(255, 255, 255, 0.05);   /* dividers / borders */
  --panel: var(--s1);
  --border: var(--rule);
  --card: var(--s1);

  /* Semantic text aliases */
  --text: var(--t1);
  --text-soft: var(--t2);
  --text-muted: var(--t2);
  --text-disabled: var(--t3);
  --soft: var(--t2);
  --muted: var(--t3);

  /* Direction aliases */
  --long: var(--green);
  --short: var(--red);
  --blue: var(--cyan);

  /* Page-specific accents (backlog) */
  --orange: #FB923C;
  --violet: var(--purple);

  /* Accents — the only chromatic colours used in the trading UI */
  --cyan:   #22D3EE;                   /* primary accent / NEUTRAL info */
  --green:  #34D399;                   /* positive · BUY · success */
  --red:    #F87171;                   /* negative · SELL · failure */
  --amber:  #FCD34D;                   /* warning · DRY_RUN · caution */
  --purple: #A78BFA;                   /* PHC · geometry · special */

  /* Typography */
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'SF Mono', Menlo, Consolas, ui-monospace, monospace;

  /* Legacy dashboard_v2 aliases (reference canonical tokens only) */
  --ink: var(--bg);
  --ink2: var(--s1);
  --ink3: rgba(255, 255, 255, 0.05);
  --ink4: var(--t4);
  --rule2: rgba(255, 255, 255, 0.08);
  --steel: rgba(255, 255, 255, 0.12);
  --ghost: var(--t2);
  --bright: var(--t1);
  --gold: var(--amber);
  --long-dim: rgba(52, 211, 153, 0.12);
  --long-border: rgba(52, 211, 153, 0.35);
  --short-dim: rgba(248, 113, 113, 0.12);
  --short-border: rgba(248, 113, 113, 0.35);
  --gold-dim: rgba(252, 211, 77, 0.12);
  --blue-dim: rgba(34, 211, 238, 0.1);
  --r: 4px;
  --transition: 120ms cubic-bezier(0.2, 0, 0, 1);

  /* Research pages (overview / screener / sectors) */
  --research-max: 1180px;
  --hairline: rgba(255, 255, 255, 0.08);
  --tile-edge: rgba(255, 255, 255, 0.10);
}

/* Sane defaults — pages may extend but should not contradict. */
html, body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--sans);
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

/* Section title atom — 11px uppercase, letter-spacing 0.12em, t2 colour. */
.qts-section-title,
.section-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t2);
  font-weight: 500;
}

/* Number atoms — always mono. */
.qts-num,
.num,
.mono { font-family: var(--mono); }