/* ── 5th Place Design Tokens (extracted from 5th-place.css 2026-06-12) ──
   Canonical variables. Loaded first; components.css depends on it. */

:root {

  /* ── FOUNDATIONAL PRIMARIES ── */
  --green-50:      #e6f4ed;
  --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-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-200:  #7dd3fc;
  --cerulean-500:  #00a6fb;   /* Vivid Cerulean */
  --cerulean-600:  #0070c4;   /* text on cerulean tints — 5.1:1 AA */
  --cerulean-800:  #005f8e;

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

  --lav-50:        #f3e8fd;
  --lav-500:       #b477eb;   /* Lavender (Floral) */
  --lav-600:       #7033b8;   /* text on lavender tints — 7.4:1 AAA */
  --lav-800:       #5e28a0;

  /* ── STRUCTURAL ── */
  --slate-50:      #eef3f5;
  --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) ── */
  --h1: 3.33rem;   /* 60px — hero headings */
  --h2: 2.00rem;   /* 36px — section headings */
  --h3: 1.33rem;   /* 24px — card/sub-section headings */
  --h4: 1.11rem;   /* 20px — minor headings */
  --h5: 0.83rem;   /* 15px — labels, eyebrows */
  --h6: 0.72rem;   /* 13px — fine print headings */

  /* ── TYPOGRAPHY — Body scale ── */
  --text-size:   1rem;    /* 18px — body copy */
  --text-sm:     0.84rem; /* 15px — captions, meta, footer links */
  --text-xs:     0.72rem; /* 13px — legal, attribution */
  --text-lh:     1.7;     /* Body line-height */
  --text-lh-h:   1.3;     /* Heading line-height */

  /* ── RADII ── */
  --r-sm: 6px;
  --r:    10px;
  --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) */

}