:root {
  /* ---- COLORS ---- */
  --clr-forest:      #1F2A24;
  --clr-forest-deep: #141c19;
  --clr-beige:       #E9E2D4;
  --clr-beige-light: #F5F1EA;
  --clr-gold:        #C8A26B;
  --clr-gold-rgb:    200, 162, 107;
  --clr-gold-hover:  #b08d57;
  --clr-white:       #FFFFFF;
  --clr-ink:         #0E0E0E;
  --clr-text:        #2C2C2C;
  --clr-text-muted:  #6B6B6B;
  --clr-border:      #DDD5C8;
  --clr-error:       #C0392B;
  --clr-success:     #27AE60;

  /* ---- TYPOGRAPHY ---- */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Manrope', system-ui, -apple-system, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  4rem;
  --fs-hero: clamp(2.5rem, 6vw, 5rem);

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;
  --lh-loose: 1.8;

  /* ---- SPACING ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---- LAYOUT ---- */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 4vw, 3rem);

  /* ---- RADIUS ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill: 9999px;

  /* ---- SHADOWS ---- */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.12);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.16);

  /* ---- TRANSITIONS ---- */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-in:    cubic-bezier(.64,.39,.78,.39);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 500ms;

  /* ---- ANIMATION reveal ---- */
  --reveal-duration: 700ms;
  --reveal-delay:    0ms;
  --reveal-easing:   cubic-bezier(.22,.61,.36,1);

  /* ---- HEADER ---- */
  --header-h: 72px;
  --header-total: calc(var(--header-h) + var(--safe-top));

  /* ---- SAFE AREA (iOS Safari) ---- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

@media (min-width: 768px) {
  :root {
    --header-h: 80px;
    --header-total: calc(var(--header-h) + var(--safe-top));
  }
}