/* ============================================================
   CHPW v3 — Design Tokens
   Single source of truth for brand colors, typography, spacing.
   Every component and page pulls from these custom properties.
   ============================================================ */

:root {
  color-scheme: light only;

  /* ---------- Color: Primary palette ---------- */
  --color-navy:        #00495D;  /* Harbourfront Blue — primary brand */
  --color-navy-deep:   #003844;  /* Navy Deep — emphasis, depth */
  --color-duck:        #00657F;  /* Duck — secondary accent */
  --color-lime-ash:    #6E7D63;  /* Lime Ash — earthy secondary */

  /* ---------- Color: Gold accent system ---------- */
  --color-golden-sun:  #E5A82C;  /* Golden Sun — primary accent */
  --color-gold-muted:  #C9A660;  /* Gold Muted — subtle accent */

  /* ---------- Color: Neutrals (warm) ---------- */
  --color-sandy:       #F4F2E9;  /* Sandy — primary background */
  --color-sandy-deep:  #EBE7D8;  /* Sandy Deep — recessed surfaces */
  --color-warm-white:  #FDFCFA;  /* Warm White — elevated surfaces */

  /* ---------- Color: Text (ink scale) ---------- */
  --color-ink:         #1A1612;  /* Primary text */
  --color-ink-soft:    #5C5448;  /* Body text */
  --color-ink-faded:   #8A8174;  /* Meta, captions */
  --color-rule:        #C9C0AB;  /* Borders, dividers */
  --color-rule-soft:   #D9D2BD;  /* Subtle dividers */

  /* ---------- Typography: families ---------- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ---------- Typography: scale ---------- */
  --text-eyebrow: 11px;
  --text-meta:    12px;
  --text-body:    16px;
  --text-lede:    18px;
  --text-h4:      22px;
  --text-h3:      28px;
  --text-h2:      36px;
  --text-h1:      clamp(36px, 5vw, 56px);
  --text-display: clamp(48px, 7vw, 84px);

  /* ---------- Typography: tracking ---------- */
  --tracking-eyebrow: 0.28em;
  --tracking-meta:    0.18em;
  --tracking-tight:   -0.015em;

  /* ---------- Typography: leading ---------- */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ---------- Spacing scale ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-narrow: 880px;
  --container-prose: 680px;
  --page-padding-x: clamp(24px, 5vw, 64px);
  --section-spacing-y: clamp(64px, 10vw, 120px);

  /* ---------- Transitions ---------- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ---------- Border radius (used sparingly) ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;
}