:root {
  /* ---------- Fonts ---------- */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:  'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Palette (per STYLING_GUIDE.md — partial) ----------
     --text #1f2a36 is applied to ALL headings. The "blue tint" is illusion
     from sitting on the pale-blue-gray background (--blue-pale-3). The
     text color itself is the same everywhere.
     No italics, no gold, no dark-blue accents.
  */
  --text:           #1f2a36;   /* primary text + all headings */
  --text-body:      #3d3530;   /* body copy (warm dark brown) */
  --text-muted:     #7a6e65;   /* secondary / captions */
  --text-light:     #f5f0e8;   /* on-dark */

  --blue-pale-3:    #bccdd5;   /* pale blue-gray bg */
  --bg-primary:     #f5f0e8;   /* warm cream — main */
  --bg-secondary:   #eae4d9;   /* deeper cream — alternating */
  --bg-dark:        #1f2a36;   /* navy — footer + CTA (bg only, not accent) */
  --bg-hero:        var(--blue-pale-3);

  /* NO gold accent. Replace all gold usages with neutral warm dark. */
  --accent:         #3d3530;   /* warm dark brown (replaces gold) */
  --accent-soft:    #7a6e65;
  --accent-line:    rgba(61, 53, 48, 0.4);

  --glass-bg:       rgba(255, 255, 255, 0.16);
  --glass-border:   rgba(255, 255, 255, 0.40);
  --glass-blur:     14px;

  --border:         rgba(31, 42, 54, 0.12);
  --border-strong:  rgba(31, 42, 54, 0.22);

  /* Back-compat: old --gold refs now resolve to the neutral accent so
     nothing renders gold. Remove --gold usages over time. */
  --gold:           var(--accent);
  --gold-light:     var(--accent-soft);
  --gold-dark:      var(--accent);

  --text-heading:   var(--text);

  /* ---------- Back-compat aliases (so existing components still read) ---------- */
  --color-navy:     #1f2a36;
  --color-navy-700: #2a3544;
  --color-navy-900: #151d28;
  --color-slate:    var(--blue-pale-3);
  --color-slate-300: #d5dde3;
  --color-cream:    #f5f0e8;
  --color-cream-50: #faf7f2;
  --color-gold:     var(--accent);
  --color-gold-600: var(--accent);
  --color-sage:     #eae4d9;
  --color-white:    #ffffff;

  --c-bg:         var(--bg-primary);
  --c-surface:    var(--bg-primary);
  --c-surface-alt: var(--bg-secondary);
  --c-surface-soft: var(--bg-secondary);
  --c-ink:        var(--text-heading);
  --c-ink-soft:   var(--text-body);
  --c-ink-mute:   var(--text-muted);
  --c-ink-invert: var(--text-light);
  --c-primary:    var(--bg-dark);
  --c-on-primary: var(--text-light);
  --c-accent:     var(--gold);
  --c-on-accent:  var(--bg-dark);
  --c-line:       var(--border);
  --c-line-strong: var(--border-strong);
  --c-focus:      var(--gold-light);
  --c-success:    #3f7d5a;
  --c-danger:     #b8453f;

  /* ---------- Typography scale ---------- */
  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.8125rem;
  --fs-14: 0.9375rem;
  --fs-16: 1.0625rem;
  --fs-18: 1.1875rem;
  --fs-20: 1.3125rem;
  --fs-24: 1.5625rem;
  --fs-32: 2.125rem;
  --fs-40: 2.625rem;
  --fs-48: 3.125rem;
  --fs-56: 3.625rem;
  --fs-72: 4.625rem;
  --fs-88: 5.625rem;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;
  --tracking-label: 0.12em;

  /* ---------- Spacing (4/8 rhythm) ---------- */
  --s-4:  4px;
  --s-8:  8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-56: 56px;
  --s-64: 64px;
  --s-80: 80px;
  --s-88: 88px;
  --s-96: 96px;
  --s-120: 120px;

  /* ---------- Shape ---------- */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---------- Elevation — soft, editorial, not generic ---------- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(31, 42, 54, 0.04), 0 2px 8px rgba(31, 42, 54, 0.05);
  --elev-2: 0 6px 14px rgba(31, 42, 54, 0.06), 0 12px 28px rgba(31, 42, 54, 0.07);
  --elev-3: 0 12px 32px rgba(31, 42, 54, 0.10), 0 24px 60px rgba(31, 42, 54, 0.10);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    360ms;

  /* ---------- Icon sizing ---------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* ---------- Layout ---------- */
  --container: 1240px;
  --container-wide: 1440px;
  --gutter: var(--s-24);

  /* ---------- Z-index ---------- */
  --z-nav:   80;
  --z-modal: 200;
  --z-toast: 300;
  --z-max:   1000;
}