@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700&family=Space+Mono:wght@400;700&family=Rajdhani:wght@400;500;600&display=swap');

:root {
  /* Tab accents */
  --cyan:   #00e5ff;
  --pink:   #ff2d78;
  --green:  #00e676;
  --yellow: #ffd740;
  --purple: #c084fc;
  --orange: #ff9f43;

  /* Backgrounds */
  --bg:     #06060f;
  --bg2:    #0b0b18;
  --bg3:    #10101e;

  /* Borders */
  --border:  #1c1c32;
  --border2: #252540;

  /* Text */
  --text: #d4d4f0;
  /* --dim raised from #5a5a80 (2.98:1) → #8080a8 (5.58:1 on --bg2) — WCAG 1.4.3 AA */
  --dim:  #8080a8;

  /* Typography */
  --font-label:  'Oxanium', sans-serif;
  --font-mono:   'Space Mono', monospace;
  --font-body:   'Rajdhani', sans-serif;
}

/* ── Light mode overrides ───────────────────────────────────────────────
   Toggled via document.documentElement.dataset.theme = 'light'
   Design principle: pure white cards on soft purple-grey page,
   gradient accent lines replace neon glows, colored borders carry hierarchy. */
[data-theme="light"] {
  --bg:      #ededf7;         /* page background: soft purple-grey */
  --bg2:     #ffffff;         /* card / panel surface: pure white */
  --bg3:     #f4f4fc;         /* input / inner surface: near-white */
  --border:  rgba(0,0,0,0.07);
  --border2: rgba(0,0,0,0.13);
  --text:    #14143a;         /* deep navy for max contrast */
  /* --dim raised from #6a6a9a (4.36:1) → #5a5a8c (4.91:1 on --bg) — WCAG 1.4.3 AA */
  --dim:     #5a5a8c;         /* readable but subordinate */

  /* Accents — darkened to meet WCAG 1.4.3 AA (≥ 4.5:1) on white --bg2
     --cyan  #0097a7 (3.5:1 fail) → #006e7a (5.8:1 pass)
     --green #00897b (4.2:1 fail) → #00796b (5.0:1 pass)
     --yellow/orange #e65100 (3.8:1 fail) → #c43e00 (5.0:1 pass)
     --pink  #d81b60 (5.0:1 pass) — unchanged
     --purple #6c31e6 (6.4:1 pass) — unchanged */
  --cyan:   #006e7a;
  --pink:   #d81b60;
  --green:  #00796b;
  --yellow: #c43e00;
  --purple: #6c31e6;
  --orange: #c43e00;
}