:root {
  /* Black Coffee + Champagne Gold — raw palette */
  --coffee-black: #17130f;
  --espresso: #211a14;
  --dark-brown: #2b2119;
  --champagne-gold: #d4af72;
  --bright-gold: #e3c188;
  --muted-gold: #b8955f;
  --warm-cream: #f3ebdd;
  --soft-taupe: #c8b9a5;
  --border-gold: rgba(212, 175, 114, 0.35);

  /* Semantic tokens for sitewide reuse */
  --color-bg: var(--coffee-black);
  --color-surface: var(--espresso);
  --color-surface-alt: var(--dark-brown);
  --color-text: var(--warm-cream);
  --color-text-muted: var(--soft-taupe);
  /* Primary = champagne gold so CTAs and key accents read as intentional luxury */
  --color-primary: var(--champagne-gold);
  --color-primary-dark: var(--coffee-black);
  --color-primary-soft: var(--muted-gold);
  --color-accent: var(--champagne-gold);
  --color-accent-soft: var(--bright-gold);
  --color-accent-ink: var(--bright-gold);
  /* Accessible gold typography for cream, paper, and white surfaces. */
  --color-gold-text: #865b24;
  --color-border: var(--border-gold);
  --color-control-border: rgba(200, 185, 165, 0.42);
  /* Text sitting on gold fills (buttons) */
  --color-on-primary: var(--coffee-black);
  /* Cream text for dark coffee bands (footer, overlays) */
  --color-on-dark: var(--warm-cream);
  --color-paper: var(--warm-cream);
  /* Alternate ink roles for cream, paper, and other light surfaces. */
  --color-on-light: var(--coffee-black);
  --color-on-light-muted: var(--dark-brown);
  --color-accent-on-light: var(--color-gold-text);
  --color-danger: #c47a6e;
  --color-danger-strong: #e8a59b;
  --color-danger-border: rgba(196, 122, 110, 0.45);
  --color-danger-surface: rgba(43, 33, 25, 0.92);

  /* Legacy aliases: ivory stays a light cream (text-on-dark / paper accents).
     Page backgrounds use --color-bg / --color-surface instead. */
  --ivory: var(--warm-cream);
  --paper: var(--color-paper);
  --cream: var(--color-surface-alt);
  --parchment: var(--color-border);
  --champagne: var(--color-accent-soft);
  --warm-gold: var(--color-accent-ink);
  --taupe: var(--color-primary-soft);
  --charcoal: var(--color-text);
  --soft-black: var(--coffee-black);
  --muted-ink: var(--color-text-muted);
  --border: var(--color-border);
  --border-light: rgba(243, 235, 221, 0.16);
  --shadow-soft: 0 1.5rem 4.5rem rgba(10, 8, 6, 0.45);

  /* Approved two-family type system */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Manrope", Arial, sans-serif;

  /* Sized for comfortable reading (including older eyes) while keeping the
     editorial Playfair + Manrope pairing. */
  --type-label: clamp(0.875rem, 0.84rem + 0.12vw, 0.9375rem);
  --type-ui: clamp(1rem, 0.96rem + 0.14vw, 1.0625rem);
  --type-small: 1.0625rem;
  --type-body: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);
  --type-lead: clamp(1.1875rem, 1.1rem + 0.32vw, 1.375rem);
  --type-h3: clamp(1.75rem, 1.55rem + 0.85vw, 2.25rem);
  --type-h2: clamp(2.5rem, 2.15rem + 1.3vw, 3.25rem);
  --type-h1: clamp(3.25rem, 2.85rem + 1.7vw, 4.25rem);
  --type-hero: clamp(2.875rem, 2.2rem + 3.2vw, 4.75rem);

  /* Backwards-compatible scale names; semantic tokens above are preferred. */
  --step--1: var(--type-small);
  --step-0: var(--type-body);
  --step-1: var(--type-lead);
  --step-2: var(--type-h3);
  --step-3: clamp(2.125rem, 1.9rem + 1vw, 2.875rem);
  --step-4: var(--type-h2);
  --step-5: var(--type-h1);

  --leading-display: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.75;
  --tracking-display: -0.012em;
  --tracking-ui: 0.03em;
  --tracking-label: 0.12em;
  --measure-copy: 62ch;
  --measure-wide: 68ch;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: clamp(4rem, 7vw, 7rem);
  --space-8: clamp(6rem, 10vw, 10rem);

  --shell: 82rem;
  --shell-wide: 94rem;
  --gutter: clamp(1.15rem, 3.2vw, 3.5rem);
  --line: 1px solid var(--border);
  --transition-fast: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 650ms cubic-bezier(0.22, 1, 0.36, 1);
}