/* =============================================================================
   tokens.css — Cover3.mx design system
   Single source of truth for colors, typography, spacing.
   Source: cover3mx-spec.md §4
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=JetBrains+Mono:wght@400;500;700&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  /* === Surface === */
  --c-bg:       #06080d;   /* deeper near-black, matches the logo's pure-black background */
  --c-card:     #11141b;
  --c-border:   #1c2230;

  /* === Text === */
  --c-text:     #ecedf2;   /* slightly cooler off-white, closer to the logo wordmark */
  --c-text-2:   #8a90a0;
  --c-text-3:   #5a6070;

  /* === Brand (sampled from COVER3_LOGO.png — the glowing nodes) === */
  --c-brand:    #2c82ff;   /* Electric blue — primary brand + every CTA / link / accent */
  --c-brand-2:  #4d96ff;   /* Brand blue, hover/lighter */
  --c-brand-3:  #1057c2;   /* Brand blue, deeper for borders/glow tint */

  /* === Chrome / silver (sampled from the hexagon shield) === */
  --c-silver:   #c4c8d0;   /* Bright silver — wordmark + key icon strokes */
  --c-silver-2: #7a7e88;   /* Mid silver — secondary chrome / dividers */

  /* === Engine accents (CORTEX shares the brand blue by design — */
  /*     it IS the quantitative engine; the brand grew from it) === */
  --c-cortex:   #2c82ff;   /* Brand blue — quantitative engine */
  --c-oracle:   #b388ff;   /* Purple     — contextual engine */
  --c-arbiter:  #00e676;   /* Green      — synthesis engine */

  /* === Status === */
  --c-warn:     #ffd740;   /* Yellow — leans / medium */
  --c-alert:    #ff9100;   /* Orange — splits */
  --c-error:    #ff5252;   /* Red    — passes / flags */

  /* === Confidence tier shadows === */
  --glow-brand:   0 0 24px rgba(44, 130, 255, 0.28);
  --glow-arbiter: 0 0 24px rgba(0, 230, 118, 0.18);
  --glow-cortex:  0 0 24px rgba(44, 130, 255, 0.22);
  --glow-oracle:  0 0 24px rgba(179, 136, 255, 0.18);

  /* === Typography === */
  --f-display:  'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:     'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --f-body:     'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:      0.75rem;
  --fs-sm:      0.875rem;
  --fs-base:    1rem;
  --fs-md:      1.125rem;
  --fs-lg:      1.25rem;
  --fs-xl:      1.5rem;
  --fs-2xl:     2rem;
  --fs-3xl:     2.5rem;
  --fs-4xl:     3.5rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.5;
  --lh-loose:   1.7;

  --tracking-wide:    0.08em;
  --tracking-wider:   0.16em;
  --tracking-widest:  0.24em;

  /* === Spacing === */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.5rem;
  --sp-6:   2rem;
  --sp-8:   3rem;
  --sp-10:  4rem;
  --sp-12:  6rem;

  /* === Radius === */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;

  /* === Shadows === */
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-pop:   0 8px 24px rgba(0, 0, 0, 0.6);

  /* === Layout === */
  --content-max: 1200px;
  --content-pad: 1.5rem;
  --bp-mobile:   800px;

  /* === Motion === */
  --t-fast:   120ms ease;
  --t-base:   200ms ease;
  --t-slow:   320ms ease;
}