/* =============================================================================
   DESIGN TOKENS
   Blend of Hyperfoundation (violet-black + aurora glow + serif display) and
   Aevo (pure-black rigor, mono tickers, structured panels).
   --accent is overwritten at runtime from js/config.js (brand.js).
   ========================================================================== */

:root {
  /* Base surfaces */
  --bg:          #07060f;
  --bg-2:        #0a0916;
  --surface:     #0e0d1b;
  --surface-2:   #141220;
  --surface-3:   #1b1829;

  /* Hairlines */
  --line:        rgba(255, 255, 255, 0.07);
  --line-2:      rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.20);

  /* Text */
  --text:        rgba(255, 255, 255, 0.95);
  --text-2:      rgba(255, 255, 255, 0.66);
  --text-3:      rgba(255, 255, 255, 0.52);
  --text-4:      rgba(255, 255, 255, 0.40);

  /* Brand accent (violet) — overridden by config at runtime.
     Deliberately far from --up/--down in hue: on an options book the brand
     colour must never be mistaken for a P&L sign. */
  --accent:        #978eff;
  --accent-ink:    #0b0720;
  --accent-soft:   rgba(151, 142, 255, 0.14);
  --accent-line:   rgba(151, 142, 255, 0.32);
  --accent-glow:   rgba(151, 142, 255, 0.45);
  --accent-deep:   #2b1d6e;   /* deep violet for gradient blooms */

  /* Glass (frosted panels over the video background) */
  --glass:       rgba(45, 38, 104, 0.30);
  --glass-2:     rgba(42, 35, 100, 0.40);
  --glass-strong:rgba(38, 31, 92, 0.48);
  --glass-line:  rgba(255, 255, 255, 0.22);
  --glass-blur:  blur(16px) saturate(150%);

  /* Market semantics */
  --up:          #21d99a;
  --up-soft:     rgba(33, 217, 154, 0.13);
  --down:        #ff5a72;
  --down-soft:   rgba(255, 90, 114, 0.13);

  /* Typography */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Radii */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 12px 40px rgba(0,0,0,0.45);
  --shadow-lg:  0 30px 80px rgba(0,0,0,0.55);
  --shadow-accent: 0 10px 40px rgba(151, 142, 255, 0.22);

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --nav-h: 68px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}