/* ══════════════════════════════════════════════════════════
   CodingInABox — Design tokens (SINGLE SOURCE OF TRUTH)
   Open Props base + a systematized, AA-accessible neon brand layer.
   Link this FIRST on every page, before lms.css. Do not redeclare
   these tokens inline anywhere else.
   ══════════════════════════════════════════════════════════ */
@import url("https://unpkg.com/open-props@1.7.7/open-props.min.css");

:root {
  /* ── Brand (legacy aliases — kept so existing pages keep working) ── */
  --neon-cyan: #00F0FF;
  --neon-magenta: #FF00E5;
  --deep-navy: #050B1A;
  --glass-bg: rgba(10, 22, 40, 0.8);

  /* ── Semantic color roles ── */
  --color-bg: #050B1A;
  --color-surface: rgba(10, 22, 40, 0.8);   /* glass cards */
  --color-surface-2: #0a1628;                /* solid raised */
  --color-surface-3: #020617;                /* insets (video, code) */
  --color-primary: #00F0FF;                  /* cyan — accents, borders, large headings */
  --color-primary-soft: rgba(0, 240, 255, 0.12);
  --color-accent: #FF00E5;                    /* magenta — gradients/accents ONLY, never body text */
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-error: #f87171;

  /* ── Text (meet WCAG AA on dark surfaces) ── */
  --text-1: #f1f5f9;    /* primary */
  --text-2: #cbd5e1;    /* secondary */
  --text-3: #94a3b8;    /* muted (AA for large/secondary only) */
  --text-on-primary: #050B1A;  /* dark ink on cyan fills */

  /* ── Borders / focus ── */
  --border: rgba(0, 240, 255, 0.18);
  --border-strong: rgba(0, 240, 255, 0.40);
  --focus-ring: 0 0 0 3px rgba(0, 240, 255, 0.55);

  /* ── Spacing scale (aliased onto Open Props --size-*, explicit fallback) ── */
  --space-1: var(--size-1, 0.25rem);
  --space-2: var(--size-2, 0.5rem);
  --space-3: var(--size-3, 1rem);
  --space-4: var(--size-4, 1.25rem);
  --space-5: var(--size-5, 1.5rem);
  --space-6: var(--size-7, 2rem);
  --space-8: var(--size-9, 3rem);

  /* ── Radius / shadow / motion ── */
  --radius-1: var(--radius-2, 6px);
  --radius-2: var(--radius-3, 12px);
  --radius-round: 999px;
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-glow-cyan: 0 0 20px rgba(0, 240, 255, 0.25);
  --shadow-glow-magenta: 0 0 22px rgba(255, 0, 229, 0.45);
  --ease: var(--ease-3, cubic-bezier(0.25, 0, 0.3, 1));

  /* ── Typography ── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}

/* Respect reduced-motion globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── Wave 1: unified chrome tokens (appended 2026-07-03) ── */
:root {
  --surface-glass: rgba(10,22,40,0.65);
  --surface-glass-strong: rgba(5,11,26,0.88);
  --blur-glass: 16px;
  --content-max: 1200px;
  --section-pad: clamp(3.5rem, 9vw, 7rem);
  --fs-hero: clamp(2.75rem, 5.5vw + 1rem, 5.5rem);
  --fs-h2: clamp(1.75rem, 2.5vw + 0.5rem, 2.75rem);
  --fs-lead: clamp(1.05rem, 1vw + 0.75rem, 1.25rem);
}