/* ============================================================
   johnplusenglish.com — single source of truth for colour,
   type and spacing tokens.

   Change a value HERE once and every page picks it up:
   shell.css @imports this file, and every content page links it.

   Structure: 4 accent hues (blue / green / red / amber), each with
   bright / dark / tint, plus five neutrals. Legacy alias names are
   kept pointing at the same canonical values so older pages keep
   working. Genuinely page-specific tokens (per-page part-colour
   scales, per-tab --tab-accent, per-language --lang, etc.) stay in
   that page's own <style> block.
   ============================================================ */
:root{
  /* ---- Neutrals ---- */
  --cream:#F7F6F3;--ink:#2D3047;--muted:#7A7D8E;--border:#E8E5DF;--card:#fff;
  --bg:#F7F6F3;--bg-card:#FFFFFF;
  --text-primary:#2D3047;--text-secondary:#7A7D8E;--text-muted:#7A7D8E;
  --accent-navy:#2D3047;

  /* ---- Blue — primary ---- */
  --sky:#2176FF;--sky-light:#E8EEFF;--sky-tint:#E8EEFF;
  --accent:#2176FF;--accent-light:#E8EEFF;
  --accent-blue:#2176FF;--blue:#2176FF;
  --lavender:#2176FF;--lavender-light:#E8EEFF;--accent-violet:#2176FF;

  /* ---- Green — accent + positive / highlight ---- */
  --sea:#1DD3B0;--sea-d:#0F7D71;--sea-tint:#E4FBF7;--sea-light:#E4FBF7;
  --mint:#1DD3B0;--accent-teal:#1DD3B0;--accent-green:#1DD3B0;
  --green:#0F7D71;--ok:#1DD3B0;--correct:#1DD3B0;

  /* ---- Red — feedback / errors ---- */
  --coral:#FF6B6B;--coral-d:#D6453F;--coral-tint:#FDECEC;--coral-light:#FDECEC;
  --accent-coral:#FF6B6B;--warn:#FF6B6B;--red:#D6453F;

  /* ---- Amber — tips / warnings ---- */
  --sun:#FFB347;--sun-d:#A5690A;--sun-tint:#FFF5E6;
  --sand:#FFF5E6;--accent-amber:#FFB347;

  /* ---- Type ---- */
  --font-display:'Outfit',sans-serif;--font-body:'Outfit',sans-serif;
  --sans:'Outfit',system-ui,sans-serif;

  /* ---- Layout / spacing ---- */
  --radius:14px;--radius-sm:10px;
  --sidebar-w:220px;--sidebar-collapsed:52px;
  --shadow-sm:0 1px 3px rgba(45,48,71,.06);--shadow-md:0 4px 14px rgba(45,48,71,.08);
}