/* ============================================================
   NJITA v2 — Design Tokens
   css/tokens.css
   Single source of truth for all design values.
   ============================================================ */

:root {
  --font-sans:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
  --max-w:        1100px;
  --container-pad: 1.5rem;
}

/* ── DARK THEME (default) ────────────────────────────────── */
:root,
[data-theme="dark"] {
  --color-bg:           #080c10;
  --color-bg-1:         #0e1318;
  --color-bg-2:         #141b22;
  --color-border:       #1e2a34;
  --color-border-light: #243040;
  --color-text:         #e2eaf2;
  --color-text-muted:   #637a8f;
  --color-text-dim:     #3d5266;
  --color-accent:       #00d4ff;
  --color-accent-dim:   rgba(0, 212, 255, 0.12);
  --color-green:        #00e5a0;
  --color-nav-bg:       rgba(8, 12, 16, 0.95);
  --color-input-bg:     #080c10;
  --color-scanline:     rgba(0, 0, 0, 0.03);
}

/* ── LIGHT THEME ─────────────────────────────────────────── */
[data-theme="light"] {
  --color-bg:           #f0f4f8;
  --color-bg-1:         #e4eaf1;
  --color-bg-2:         #d8e1eb;
  --color-border:       #c8d4e0;
  --color-border-light: #b8c8d8;
  --color-text:         #0d1b2a;
  --color-text-muted:   #4a6070;
  --color-text-dim:     #7a96aa;
  --color-accent:       #007aaa;
  --color-accent-dim:   rgba(0, 122, 170, 0.10);
  --color-green:        #007a58;
  --color-nav-bg:       rgba(240, 244, 248, 0.95);
  --color-input-bg:     #f0f4f8;
  --color-scanline:     rgba(0, 0, 0, 0.012);
}

/* ── SPACING SCALE ───────────────────────────────────────── */
:root {
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-28: 7rem;
}

/* ── TYPOGRAPHY SCALE ────────────────────────────────────── */
:root {
  --text-xs:   0.65rem;
  --text-sm:   0.72rem;
  --text-base: 0.85rem;
  --text-md:   1rem;
  --text-lg:   1.1rem;
  --text-xl:   1.5rem;
  --text-3xl:  clamp(1.6rem, 3vw, 2.4rem);
  --text-hero: clamp(2.4rem, 5.5vw, 5rem);
}

/* ── BORDER RADIUS ───────────────────────────────────────── */
:root {
  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-full: 9999px;
}

/* ── Z-INDEX ─────────────────────────────────────────────── */
:root {
  --z-nav:      100;
  --z-pwa:      9998;
  --z-scanline: 9999;
}

/* ── TRANSITIONS ─────────────────────────────────────────── */
:root {
  --ease-fast:   0.15s ease;
  --ease-base:   0.2s ease;
  --ease-theme:  0.25s ease;
}