/* ================================================================
   WAREX EXCHANGE TERMINAL — DESIGN TOKENS  (exchange-tokens.css)
   ================================================================
   V2 design system for the locked direction "The Exchange Terminal".
   Documented in _design/DESIGN-SYSTEM.md. V3 pages inherit from here.

   Colour is authored in OKLCH (perceptually uniform; hue stays true
   as lightness shifts). A hex fallback layer loads first so the page
   never renders unstyled on pre-OKLCH engines.

   Naming: --wx-* prefix keeps the V2 system clear of the legacy
   warex-uniform.css cascade (which is NOT loaded on V2 pages).
   ================================================================ */

:root {
  /* ---- colour: hex fallbacks (pre-OKLCH engines) ---- */
  --wx-ink:        #0a0f1c;   /* page ground — near-black navy        */
  --wx-ink-2:      #0d1424;   /* raised ground — ticker, terminal     */
  --wx-panel:      #101a2e;   /* panel fill — status, cards           */
  --wx-paper:      #eef2f6;   /* primary text                          */
  --wx-dim:        #93a1b8;   /* secondary text — 4.5:1+ on ink        */
  --wx-dim-hi:     #a9b5c7;   /* disclaimers — must out-read --wx-dim  */
  --wx-faint:      #8290ab;   /* tertiary mono labels — 4.5:1 on ink   */
  --wx-ghost:      #45506b;   /* decorative only — never running text  */
  --wx-amber:      #ffb224;   /* demand side, primary action           */
  --wx-amber-hi:   #ffc657;   /* amber hover                           */
  --wx-cyan:       #38e1ff;   /* supply side, data accent              */
  --wx-green:      #2ee6a8;   /* positive state                        */
  --wx-red:        #ff5c5c;   /* negative state                        */

  /* ---- colour: translucent strokes & glows ---- */
  --wx-line:       rgba(238, 242, 246, 0.14);  /* panel borders        */
  --wx-hair:       rgba(238, 242, 246, 0.07);  /* hairline dividers    */
  --wx-grid:       rgba(56, 225, 255, 0.05);   /* page grid texture    */
  --wx-amber-glow: rgba(255, 178, 36, 0.12);
  --wx-cyan-glow:  rgba(56, 225, 255, 0.12);
  --wx-scrim:      rgba(10, 15, 28, 0.93);     /* nav / overlay scrim  */

  /* ---- type families ---- */
  --wx-font-display: 'Big Shoulders', 'Arial Narrow', 'Impact', sans-serif;
  --wx-font-mono:    'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  --wx-font-body:    'Saira', 'Segoe UI', system-ui, sans-serif;

  /* ---- type scale (display ramps are fluid) ---- */
  --wx-text-2xs: 0.625rem;                          /* 10px mono micro  */
  --wx-text-xs:  0.6875rem;                         /* 11px mono labels */
  --wx-text-sm:  0.8125rem;                         /* 13px small body  */
  --wx-text-md:  0.9375rem;                         /* 15px body        */
  --wx-text-lg:  1.0625rem;                         /* 17px lede        */
  --wx-disp-sm:  clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --wx-disp-md:  clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);
  --wx-disp-lg:  clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem);
  --wx-disp-xl:  clamp(3.8rem, 2.2rem + 8.6vw, 9rem);
  --wx-track-data: 0.1em;                           /* mono label tracking */
  --wx-track-wide: 0.22em;                          /* micro caps tracking */

  /* ---- space (4px base) ---- */
  --wx-s1: 0.25rem;
  --wx-s2: 0.5rem;
  --wx-s3: 0.75rem;
  --wx-s4: 1rem;
  --wx-s5: 1.5rem;
  --wx-s6: 2rem;
  --wx-s7: 3rem;
  --wx-s8: 4.5rem;
  --wx-s9: 6rem;
  --wx-gutter: clamp(1.125rem, 4vw, 2.75rem);       /* page side padding */
  --wx-max: 1320px;                                  /* content max width */

  /* ---- motion language ----
     in:   things arrive decisively, settle fast (ease-out)
     data: ticker drifts linear, pulses breathe sine-like
     lift: actions acknowledge on hover with a 2px rise            */
  --wx-ease-out:   cubic-bezier(0.22, 0.61, 0.2, 1);
  --wx-ease-snap:  cubic-bezier(0.3, 0.7, 0.3, 1.15);
  --wx-dur-fast:   150ms;
  --wx-dur-base:   300ms;
  --wx-dur-slow:   600ms;
  --wx-dur-tape:   48s;                              /* ticker loop      */
  --wx-dur-pulse:  2.8s;                             /* node halo breath */

  /* ---- structure ---- */
  --wx-notch: 10px;          /* clipped-corner size on actions          */
  --wx-border: 1px;
}

/* ---- OKLCH layer — authoritative palette ---- */
@supports (color: oklch(50% 0 0)) {
  :root {
    --wx-ink:        oklch(16.5% 0.028 262);
    --wx-ink-2:      oklch(19% 0.033 261);
    --wx-panel:      oklch(22% 0.038 259);
    --wx-paper:      oklch(95.5% 0.007 250);
    --wx-dim:        oklch(72% 0.025 255);
    --wx-dim-hi:     oklch(77.5% 0.022 255);
    --wx-faint:      oklch(66% 0.028 256);
    --wx-ghost:      oklch(42% 0.035 258);
    --wx-amber:      oklch(81.5% 0.156 75);
    --wx-amber-hi:   oklch(86% 0.135 80);
    --wx-cyan:       oklch(85% 0.13 215);
    --wx-green:      oklch(85% 0.15 165);
    --wx-red:        oklch(70% 0.19 25);
    --wx-line:       oklch(95.5% 0.007 250 / 0.14);
    --wx-hair:       oklch(95.5% 0.007 250 / 0.07);
    --wx-grid:       oklch(85% 0.13 215 / 0.05);
    --wx-amber-glow: oklch(81.5% 0.156 75 / 0.12);
    --wx-cyan-glow:  oklch(85% 0.13 215 / 0.12);
    --wx-scrim:      oklch(16.5% 0.028 262 / 0.93);
  }
}