/* ============================================================
   tokens.css — design tokens (colors, type, spacing, radii,
   shadows) for BOTH themes. LIGHT is the default theme; dark
   applies only via [data-theme="dark"] (user toggle).
   ============================================================ */

:root {
  /* Color — light (default) theme. Pure white background, slate ink,
     deep-navy accent. Illinois-orange alternative: --accent: #E84A27 */
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-alt: #f1f4f9;
  --text: #17202c;
  --text-muted: #5b6676;
  --accent: #274c72;
  --accent-2: #3a6ea5;
  --accent-soft: rgba(39, 76, 114, 0.08);
  --on-accent: #ffffff; /* text/icon color on accent-filled surfaces */
  --venue: #9d174d;
  --ok: #047857; /* AA: ≥4.5:1 on bg, card, and the tinted status pill */
  --err: #dc2626;
  --border: #e3e8f0;
  --glow-1: rgba(120, 130, 140, 0.05);
  --glow-2: rgba(120, 130, 140, 0.04);

  /* Shadows */
  --shadow: 0 1px 2px rgba(23, 32, 44, 0.04), 0 8px 24px rgba(23, 32, 44, 0.06);
  --shadow-lg: 0 4px 12px rgba(23, 32, 44, 0.08), 0 16px 40px rgba(23, 32, 44, 0.1);

  /* Typography */
  --font-display: "Sora", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --fs-xs: 0.72rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.55rem;
  --fs-xl: 2.1rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Layout */
  --max-width: 1400px;
}

/* Dark theme — applied only by the explicit user toggle. */
:root[data-theme="dark"] {
  --bg: #0b0f19;
  --bg-card: #111827;
  --bg-alt: #16203297;
  --text: #e5eaf3;
  --text-muted: #94a0b3;
  --accent: #7fa3c9;
  --accent-2: #a3c0dc;
  --accent-soft: rgba(127, 163, 201, 0.1);
  --on-accent: #0b0f19; /* dark text on the light-navy accent: 7.3:1 */
  --venue: #f472b6;
  --ok: #34d399;
  --err: #f87171;
  --border: #232e42;
  --glow-1: rgba(140, 150, 165, 0.07);
  --glow-2: rgba(140, 150, 165, 0.05);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.4);
}