/* ==========================================================================
   Intellopia — Brand tokens + themes (single source of truth)
   Three colors, two modes:
     DARK  = deep blue ink surfaces, cream text, coral accents
     LIGHT = cream surfaces, ink text, deep-coral accents
   Coral is BRAND ACCENT ONLY (CTAs, links, focus). Never a status color.
   All pairings verified >= 4.5:1 (WCAG AA).
   ========================================================================== */

:root {
  /* ---- Raw palette (never use these directly in components) ---- */
  --ink-900: #071321;
  --ink-800: #0C1B2E;
  --ink-700: #12253B;
  --ink-600: #1B3149;
  --ink-line: #1E3348;

  --cream-50: #FBF5E8;
  --cream-100: #F5E7CA;
  --cream-200: #EADBBD;
  --cream-line: #DFD0AF;

  --coral: #ED6B5B;        /* accent on dark (6.1:1 on ink-900) */
  --coral-deep: #B23A2B;   /* accent on light (5.5:1 on cream-50) */

  /* ---- Shape & layout ---- */
  --radius-card: 14px;
  --radius-ctrl: 10px;
  --radius-pill: 999px;
  --max: 1120px;

  /* ---- Type ---- */
  --font-ui: 'Poppins', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ==========================================================================
   DARK (default) — deep blue, not black: gradient bg, elevated cards
   ========================================================================== */
:root, [data-theme="dark"] {
  --bg: var(--ink-900);
  --bg-gradient: linear-gradient(180deg, #0B1E33 0%, var(--ink-900) 38%, var(--ink-900) 100%);
  --surface: var(--ink-800);
  --surface-2: var(--ink-700);
  --line: var(--ink-line);

  --heading: var(--cream-100);
  --body-text: #E4E0D4;
  --muted: #97A3B0;          /* 7.3:1 on ink-900 */
  --faint: #6E7D8C;          /* large text / disabled only */

  --accent: var(--coral);
  --on-accent: var(--ink-900);
  --accent-glow: rgba(237, 107, 91, .28);

  --nav-bg: rgba(12, 27, 46, .82);
  --coil-shadow: rgba(0, 0, 0, .5);
  --glow-a: rgba(120, 158, 208, .06);   /* subtle cool-blue depth glow (was cream, which cast a cream halo around the coil) */
  --glow-b: rgba(237, 107, 91, .07);    /* coral glow */

  /* Inverted band: a CREAM section inside the dark page */
  --band-bg: var(--cream-50);
  --band-surface: var(--cream-100);
  --band-line: var(--cream-line);
  --band-heading: var(--ink-900);
  --band-body: var(--ink-700);
  --band-muted: #4A5B6E;     /* 6.4:1 on cream-50 */
  --band-accent: var(--coral-deep);
}

/* ==========================================================================
   LIGHT — cream page, ink text, one deep-blue band
   ========================================================================== */
[data-theme="light"] {
  --bg: var(--cream-50);
  --bg-gradient: linear-gradient(180deg, #FFFBF1 0%, var(--cream-50) 38%, var(--cream-50) 100%);
  --surface: var(--cream-100);
  --surface-2: #FFFDF6;
  --line: var(--cream-line);

  --heading: var(--ink-900);
  --body-text: var(--ink-700);
  --muted: #4A5B6E;          /* 6.4:1 on cream-50 */
  --faint: #8195A8;

  --accent: var(--coral-deep);
  --on-accent: var(--cream-50);
  --accent-glow: rgba(178, 58, 43, .22);

  --nav-bg: rgba(251, 245, 232, .85);
  --coil-shadow: rgba(7, 19, 33, .18);
  --glow-a: rgba(237, 107, 91, .10);
  --glow-b: rgba(7, 19, 33, .05);

  /* Inverted band: a DEEP-BLUE section inside the light page */
  --band-bg: var(--ink-900);
  --band-surface: var(--ink-800);
  --band-line: var(--ink-line);
  --band-heading: var(--cream-100);
  --band-body: #E4E0D4;
  --band-muted: #97A3B0;
  --band-accent: var(--coral);
}