/* ============================================================
   SHARED DESIGN TOKENS — single source of truth for every page.
   Link in <head> BEFORE each page's own inline <style>, so any
   residual page-scoped :root override (e.g. the homepage's
   --max-width) wins the equal-specificity source-order tiebreak.
   A token lives HERE once any SHARED stylesheet references it (e.g.
   --content-width, used by chapter.css's .chapter-nav; --tab-height and
   --green/--green-dim/--red, used by shared chapter.css). Tokens used
   only by a page's OWN inline <style> may stay page-scoped inline:
     --sidebar-width (atlas).
   ============================================================ */
:root {
  /* Navy palette — brand identity / primary surface */
  --navy-950: #050e16;
  --navy-900: #0a1a28;
  --navy-850: #0d2133;
  --navy-800: #0f2a3d;
  --navy-700: #153a52;
  --navy-600: #1d5170;
  --navy-500: #26688e;
  --navy-400: #4a8eb5;
  --navy-300: #7ab4d4;
  --navy-200: #a3ceea;
  --navy-100: #d4e9f7;

  /* Cool accent — the instrument blue */
  --accent: #3ba4e0;
  --accent-bright: #5dbcf0;
  --accent-glow: rgba(59, 164, 224, 0.12);
  --accent-glow-strong: rgba(59, 164, 224, 0.2);

  /* Warm accent — education / authoring gold */
  --card-accent: #d4943a;
  --card-accent-bright: #e0a54e;
  --card-accent-glow: rgba(212, 148, 58, 0.08);
  --card-accent-glow-strong: rgba(212, 148, 58, 0.15);

  /* Surfaces */
  --surface-base: #0a1a28;
  --surface-raised: rgba(255, 255, 255, 0.03);
  --surface-raised-hover: rgba(255, 255, 255, 0.06);
  --surface-card: rgba(255, 255, 255, 0.04);
  --surface-card-hover: rgba(255, 255, 255, 0.07);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.15);
  --border-accent: rgba(59, 164, 224, 0.3);

  /* Text on dark */
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.60);
  --text-muted: rgba(255, 255, 255, 0.35);
  --text-faint: rgba(255, 255, 255, 0.2);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.5rem;

  /* Leading */
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Layout */
  --max-width: 1200px;    /* homepage keeps an inline --max-width: 1120px override */
  --nav-height: 64px;     /* promoted from chapters; homepage previously used nav.css's fallback */
  --content-width: 800px; /* chapters + about reading column; used by shared chapter.css .chapter-nav */
  --tab-height: 48px;     /* chapter learn/practice/atlas tab bar; referenced by shared chapter.css (.sidebar top, [id] scroll-margin) */

  /* Chapter quiz result colors — referenced by shared chapter.css (.list-answer-title, sidebar progress) */
  --green: #34a853;
  --green-dim: rgba(52, 168, 83, 0.7);
  --red: #ea4335;
}
