/* ── 5th Place Design Tokens ──────────────────────────────────────────────
   Single source of truth. All mockup and production pages link here.
   Source: colour-system.html (proofed 2026-02-23)
   DO NOT edit this file directly — update colour-system.html :root first,
   then copy the block here.
   ───────────────────────────────────────────────────────────────────────── */

:root {

  /* ── FOUNDATIONAL PRIMARIES ── */
  --green-50:      #e6f4ed;
  --green-100:     #d4ecdf;   /* tonal-button hover deepen (ink green-600 = 5.08:1) */
  --green-200:     #9fd4b5;
  --green-500:     #179355;   /* Spanish Green */
  --green-600:     #0d6e40;   /* text on green tints — 6.3:1 AA */
  --green-800:     #0d5c35;

  --yellow-50:     #fef8e0;
  --yellow-100:    #fdf0c4;   /* tonal-button hover deepen (ink yellow-800 = 5.72:1) */
  --yellow-200:    #fde68a;
  --yellow-500:    #fdca40;   /* Sunglow */
  --yellow-600:    #e8b800;   /* Yellow hover state */
  --yellow-800:    #7a5800;
  --yellow-text:   #3a1800;   /* Dark brown — text on yellow backgrounds */

  --cerulean-50:   #ddf1fc;
  --cerulean-100:  #c4e6fb;   /* tonal-button hover deepen (ink cerulean-800 = 5.30:1) */
  --cerulean-200:  #7dd3fc;
  --cerulean-500:  #00a6fb;   /* Vivid Cerulean */
  --cerulean-600:  #0070c4;   /* text on cerulean tints — 5.1:1 AA */
  --cerulean-800:  #005f8e;
  --cerulean-900:  #004d73;   /* article body link hover (article-body-spec §Inline links) */

  /* ── ACCENTS ── */
  --turq:          #42f2f7;   /* Turquoise — dark bg only */

  --lav-50:        #f3e8fd;
  --lav-100:       #e6d5fb;   /* tonal-button hover deepen (ink lav-600 = 5.35:1) */
  --lav-500:       #b477eb;   /* Lavender (Floral) */
  --lav-600:       #7033b8;   /* text on lavender tints — 7.4:1 AAA */
  --lav-800:       #5e28a0;

  /* ── STRUCTURAL ── */
  --slate-50:      #eef3f5;
  --slate-100:     #dde8ec;   /* tonal-button hover deepen (ink slate-500 = 6.63:1) */
  --slate-200:     #8aafbb;
  --slate-500:     #225560;   /* Dark Slate Gray */
  --slate-900:     #1a2e25;   /* Near-black / footer */

  /* ── TEXT SCALE — all WCAG AA 4.5:1+ on white ── */
  --text-h:  #225560;   /* 7.1:1 on white — headings */
  --text-b:  #3d5f6b;   /* 6.9:1 on white — body */
  --text-m:  #4e6879;   /* 5.9:1 on white — muted/secondary */

  /* ── SURFACE SCALE ── */
  --s0: #ffffff;    /* Cards, modals */
  --s1: #faf9f7;    /* Hero, nav — barely warm */
  --s2: #f5f3ef;    /* Sections — warm linen */
  --s3: #ede9e3;    /* Hover states, inset cards */
  --s4: #e0dbd4;    /* Borders, dividers */

  /* ── TYPOGRAPHY — Fonts ── */
  --font-h: 'Outfit', sans-serif;       /* Headings, UI, labels */
  --font-b: 'Open Sans', sans-serif;    /* Body copy */
  --font-q: 'Lora', Georgia, serif;     /* Quotes, pullquotes, testimonials */

  /* ── TYPOGRAPHY — Type scale (desktop, base 18px) ── */
  /* These are the canonical heading sizes. BB Customizer is set to match.
     Suffixes -md / -sm match BB's typography_medium / typography_responsive
     breakpoints (BB defaults: medium ≤ 992px, responsive ≤ 768px). Bricks
     reference them in YAML as ${h1-article}, ${h1-article-md}, etc. */
  --h1: 3.33rem;            /* 60px — brand/landing hero (desktop) */
  --h1-md: 2.75rem;         /* 50px — brand hero tablet */
  --h1-sm: 2.25rem;         /* 40.5px — brand hero mobile */
  --h1-article: 2.5rem;     /* 45px — article hero (desktop). Per article-template-spec §2b. */
  --h1-article-md: 2.25rem; /* 40.5px — article hero tablet */
  --h1-article-sm: 2rem;    /* 36px — article hero mobile */
  --h2: 2.00rem;            /* 36px — section / dispatch hero (desktop) */
  --h2-md: 1.85rem;         /* 33.3px — section tablet */
  --h2-sm: 1.65rem;         /* 29.7px — section mobile */
  --h3: 1.33rem;            /* 24px — card/sub-section headings */
  --h4: 1.11rem;            /* 20px — minor headings */
  --h5: 0.83rem;            /* 15px — labels, eyebrows at heading weight */
  --h6: 0.72rem;            /* 13px — fine print headings */

  /* ── TYPOGRAPHY — Body scale ── */
  --text-size:   1rem;    /* 18px — body copy (HOLDS flat across breakpoints per editorial research: Marginalian, Craig Mod, Stripe Press, Butterick all fix body) */
  --text-sm:     0.84rem; /* 15px — captions, meta, footer links (holds flat — already small) */
  --text-xs:     0.72rem; /* 13px — legal, attribution */
  --text-deck:    1.05rem; /* 19px — article/dispatch hero deck (desktop) */
  --text-deck-md: 1.025rem;/* 18.45px — deck tablet */
  --text-deck-sm: 1rem;    /* 18px — deck mobile (lands at body size — fine, the deck role is carried by weight + leading + colour, not size, on small screens) */
  --text-lh:     1.7;     /* Body line-height */
  --text-lh-h:   1.3;     /* Heading line-height */

  /* ── RADII ── */
  --r-sm: 6px;
  --r:    10px;
  --r-md: 12px;
  --r-lg: 16px;
  --pill: 9999px;

  /* ── LAYOUT ── */
  --max:    1100px;   /* Content max-width */
  --max-w:  1320px;   /* Wide max-width — nav, footer */
  --nav-h:  68px;     /* Sticky nav height */
  --snav-h: 42px;     /* Sub-nav height (post/article pages) */

  /* ── READING MEASURES ── (constrained content-frame widths, not the spacing scale) */
  --measure-read: 680px;   /* editorial reading column — 65–75 char at 1rem body (WCAG 1.4.8) */
  --measure-article: 720px; /* article body + article hero column (per Matthew 2026-05-23 — wider than newsletter to signal "feature read") */
  --measure-cta:  720px;   /* centred CTA / short-form content frame */

  /* ── HERO ── (viewport-proportional, NOT the 8pt spacing grid) */
  --hero-h: 75vh;          /* hero row height — partial viewport (hero-research 70–80vh; avoids 100vh "false floor") */

  /* ── SPACING ──────────────────────────────────────────────────────────
     8-point grid — ONE scale. rem and px are the same system here because
     the root font-size is 16px (see `html` rule below): 8px = 0.5rem,
     16px = 1rem, 24px = 1.5rem, 32px = 2rem, 40px = 2.5rem, 48px = 3rem.
     Editorial reading rhythm and UI spacing are different SELECTIONS from
     this one scale, not separate systems.
     Source: Material Design 3 + Apple HIG (cited in ux-references.md),
     8px unit. WCAG 1.4.12 sets the paragraph-spacing floor (>= 2x font).
     The bricks pipeline resolves ${space-N} to the bare number (px unit
     supplied separately in the margin/padding dimension). */
  --space-1:   4px;    /* 0.25rem */
  --space-2:   8px;    /* 0.5rem  — h4 -> body (post, tightest) */
  --space-3:   12px;   /* 0.75rem — h3 -> body (post) */
  --space-4:   16px;   /* 1rem    */
  --space-5:   20px;   /* 1.25rem — photo-card frame padding */
  --space-6:   24px;   /* 1.5rem  — pill -> heading; body -> h4 (pre) */
  --space-8:   32px;   /* 2rem    — heading -> body; body -> h3 (pre); column inset */
  --space-10:  40px;   /* 2.5rem  */
  --space-12:  48px;   /* 3rem    */
  --space-14:  56px;   /* 3.5rem  — dispatch-hero row top padding (7×8 grid) */
  --space-16:  64px;   /* 4rem    */
  --space-20:  80px;   /* 5rem    — section row T/B padding */

}

/* ── BASE ──
   Root font-size: 16px (browser default) — matches the implicit root used
   by mockups/bb-library.html, which is the signed-off visual reference.
   All rem tokens below were authored against this root. */
html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 2rem; }