:root {
  /* ── Colors ──────────────────────────────────────────── */
  --color-bg:        #F7F4EE;
  --color-bg-alt:    #EDE8DF;
  --color-ink:       #1C1A17;
  --color-ink-soft:  #5C5649;
  --color-accent:    #7A3B2E;
  --color-accent-2:  #B08A3E;
  --color-line:      #D6CEBC;
  --color-white:     #FFFFFF;

  /* ── Typography ──────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;    /* 12px — labels, captions */
  --text-sm:   0.875rem;   /* 14px — secondary text */
  --text-base: 1rem;       /* 16px — body */
  --text-lg:   1.125rem;   /* 18px — lead */
  --text-xl:   1.375rem;   /* 22px — subheadings */
  --text-2xl:  2rem;       /* 32px — section headings */
  --text-3xl:  3rem;       /* 48px — hero tagline */
  --text-4xl:  4.5rem;     /* 72px — name on main page */

  --leading-tight:  1.1;
  --leading-normal: 1.6;
  --tracking-wide:  0.08em;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ── Typography extras ───────────────────────────────── */
  --leading-relaxed: 1.7;

  /* ── Layout ──────────────────────────────────────────── */
  --max-width:  1200px;
  --nav-height: 72px;
  --radius-sm:  2px;

  /* ── Motion ──────────────────────────────────────────── */
  --transition:      0.25s ease;
  --transition-slow: 0.45s ease;
}

@media (max-width: 768px) {
  :root {
    --space-md:  1.25rem;
    --space-lg:  1.75rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 5rem;
  }
}