:root {
  /* ═══ Michael & Joyce Williams Family — "Winter Harbor" palette ═══
     Drawn from the 1995 Vladivostok hero photo. Token names below keep
     Nielsenhaven's raw names as aliases so every ported component style
     resolves — brown→harbor, gold→teal, parchment→ice, forest→deep teal.
     Design page: claude.ai/design → "Williams Family". */

  /* ── Raw: Winter Harbor ── */
  --color-harbor-900: #16222e;
  --color-harbor-700: #24384a;
  --color-harbor-600: #33506a;
  --color-harbor-400: #5d7f9d;
  --color-teal-900: #14484c;
  --color-teal-700: #1f6f74;
  --color-teal-500: #2f8d92;
  --color-teal-300: #7cc0c4;
  --color-ice-100: #f2f6f8;
  --color-ice-200: #dde7ed;
  --color-rose-500: #c08272;
  --color-rose-300: #e0b4a8;

  /* ── Aliases: NH raw names → Winter Harbor (do not remove; ported CSS uses these) ── */
  --color-brown-900: var(--color-harbor-900);
  --color-brown-700: var(--color-harbor-700);
  --color-brown-600: var(--color-harbor-600);
  --color-brown-400: var(--color-harbor-400);
  --color-gold-500: var(--color-teal-500);
  --color-gold-300: var(--color-teal-300);
  --color-parchment-100: var(--color-ice-100);
  --color-parchment-200: var(--color-ice-200);
  --color-forest-900: var(--color-teal-900);
  --color-forest-700: var(--color-teal-700);
  --color-forest-500: var(--color-teal-500);

  /* ── Semantic: Text ── */
  --text-primary: #14202b;
  --text-secondary: #3a4f61;
  --text-muted: #64798b;
  --text-on-dark: var(--color-ice-100);
  --text-on-dark-muted: rgba(242, 246, 248, 0.72);
  --text-on-dark-faint: rgba(242, 246, 248, 0.55);
  --text-on-dark-ghost: rgba(242, 246, 248, 0.4);
  --text-accent: var(--color-teal-500);
  --text-accent-light: var(--color-teal-300);

  /* ── Semantic: Surfaces ── */
  --surface-dark: var(--color-harbor-900);
  --surface-mid: var(--color-harbor-700);
  --surface-page: var(--color-ice-100);
  --surface-border: var(--color-ice-200);

  /* ── Semantic: Accents ── */
  --accent-primary: var(--color-teal-500);
  --accent-light: var(--color-teal-300);
  --accent-forest: var(--color-teal-700);
  --accent-forest-light: var(--color-teal-500);
  --accent-rose: var(--color-rose-500);
  --accent-rose-light: var(--color-rose-300);

  /* ── Overlay ── */
  --overlay-dark: rgba(10, 18, 26, 0.26);
  --overlay-card: rgba(244, 249, 251, 0.42);
  --overlay-card-hover: rgba(244, 249, 251, 0.58);
  --overlay-reunion: rgba(244, 249, 251, 0.46);

  /* ── Borders (teal where NH used gold; names kept) ── */
  --border-gold: 2px solid var(--color-teal-500);
  --border-gold-subtle: 1px solid rgba(47, 141, 146, 0.45);
  --border-gold-faint: 1px solid rgba(47, 141, 146, 0.3);

  /* ── Shadows ── */
  --shadow-sm: 0 2px 6px rgba(10, 20, 30, 0.10);
  --shadow-md: 0 4px 16px rgba(10, 20, 30, 0.14);
  --shadow-lg: 0 8px 32px rgba(10, 20, 30, 0.20);
  --shadow-heavy: 0 10px 40px rgba(10, 20, 30, 0.55);

  /* ── Typography (kept from Nielsenhaven for family-of-sites cohesion) ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 52px;

  /* ── Transitions ── */
  --transition-fast: 0.2s ease;
  --transition-med: 0.24s ease;
}