/* ── Ocean Sunset Design Tokens ─────────────────────────────────────────── */
:root {
  /* Core palette */
  --color-midnight:    #0d1b2a;   /* deep navy – header, footer bg */
  --color-ocean:       #1a3a5c;   /* mid-blue surface */
  --color-wave:        #2e6fa3;   /* interactive blue – links, buttons */
  --color-gold:        #f0a500;   /* sunlit gold – accent, logo */
  --color-sunset:      #e8621a;   /* fiery orange – hover, CTA */
  --color-dawn:        #f5d87a;   /* pale gold – highlights, borders */
  --color-sand:        #fdf3e3;   /* warm off-white – code backgrounds */
  --color-text:        #1c1e21;   /* near-black body text */
  --color-text-muted:  #4a5568;   /* secondary text */
  --color-bg:          #f8f4ef;   /* page background */
  --color-surface:     #ffffff;   /* card / section bg */
  --color-border:      #e2d9cc;   /* subtle border */

  /* Typography */
  --font-sans: 'Inter', 'Inter Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  /* Layout */
  --header-height: 4rem;
  --content-max: 1400px;
  --content-pad: clamp(1rem, 4vw, 3rem);

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

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(13, 27, 42, 0.12);
  --shadow-md: 0 4px 12px rgba(13, 27, 42, 0.15);
  --shadow-lg: 0 8px 24px rgba(13, 27, 42, 0.18);

  /* Transitions */
  --transition: 200ms ease;

  /* Surfaces that stay dark in BOTH themes (header, footer, hero). Splitting these
     out of --color-midnight lets the dark theme retint --color-ocean as a light text
     colour without also inverting the chrome that uses it as a background. */
  --color-chrome:      #0d1b2a;
  --color-chrome-edge: #1a3a5c;
  --color-hero-far:    #1a4a6e;

  /* Solid fills that need a readable light foreground (table head, copy button). */
  --color-fill-strong: #1a3a5c;
  --color-on-strong:   #ffffff;
  --color-row-hover:   #fff3d4;

  /* Syntax colours, tuned for >= 4.5:1 on the --color-sand code background */
  --syntax-comment: #596070;
  --syntax-string:  #2a7d4f;
  --syntax-number:  #b54c0d;
  --syntax-func:    #6f42c1;
  --color-visited:  #7a5fa0;
}

/* ── Dark theme ───────────────────────────────────────────────────────────
   Remaps the same token names so the whole surface flips — page, cards, code,
   tables and inline-SVG interiors (diagrams paint with currentColor, so they
   follow --color-text automatically). Every pair below is checked for WCAG AA.  */
:root[data-theme="dark"] {
  --color-midnight:    #070d15;
  --color-ocean:       #8fbde8;   /* now a LIGHT foreground (headings, strong, keywords) */
  --color-wave:        #7cc0f5;   /* links */
  --color-gold:        #f5b942;
  --color-sunset:      #ff9a63;
  --color-dawn:        #34465c;   /* borders — the pale gold would glare on dark */
  --color-sand:        #16202b;   /* code / striped-row background */
  --color-text:        #e7eef6;
  --color-text-muted:  #aebdcf;
  --color-bg:          #0d141c;
  --color-surface:     #131c26;
  --color-border:      #2b3a4d;

  --color-chrome:      #070d15;
  --color-chrome-edge: #1d3a57;
  --color-hero-far:    #10293f;

  --color-fill-strong: #24405c;
  --color-on-strong:   #eaf2fb;
  --color-row-hover:   #1d2a38;

  /* Re-tuned against the dark code background (#16202b) — the light-theme values
     are all too dark to read there. */
  --syntax-comment: #93a3b5;
  --syntax-string:  #7fd0a0;
  --syntax-number:  #f0a86a;
  --syntax-func:    #c4a6f5;
  --color-visited:  #bda6e0;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}