/* ─────────────────────────────────────────────────────────────────────────
   tokens.css — Single source of truth for all design tokens.
   Import this first. Never define raw values anywhere else.
   ───────────────────────────────────────────────────────────────────────── */
:root {

  /* ── Brand Palette ──────────────────────────────────────────────── */
  --cream:             #FAF7F0;
  --cream-dim:         #F0EAE0;
  --sand:              #E8DCC8;
  --sand-light:        #F2EBD9;

  --terracotta:        #C4714B;
  --terracotta-dark:   #A35A38;
  --terracotta-deep:   #7A3E22;

  --gold:              #C9963A;
  --gold-light:        #E0B86A;
  --gold-dim:          #9A7228;

  --sage:              #7C9A7E;

  --night:             #0E0A08;
  --night-soft:        #1A1210;
  --night-mid:         #221710;
  --night-warm:        #2E1E16;
  --night-accent:      #3A2820;

  /* ── Text ───────────────────────────────────────────────────────── */
  --text-dark:         #1A1410;
  --text-mid:          #4A3A32;
  --text-light:        #7A6A60;
  --text-inverse:      #FAF7F0;
  --text-inverse-dim:  rgba(250, 247, 240, 0.68);
  --text-inverse-mute: rgba(250, 247, 240, 0.42);

  /* ── Glassmorphism ──────────────────────────────────────────────── */
  /* Used selectively: nav (scrolled), floating CTA, AI chat panel.  */
  --glass-dark-bg:     rgba(14, 10, 8, 0.74);
  --glass-dark-border: rgba(201, 150, 58, 0.20);
  --glass-warm-bg:     rgba(46, 30, 22, 0.80);
  --glass-warm-border: rgba(201, 150, 58, 0.26);
  --glass-blur:        blur(18px);
  --glass-blur-sm:     blur(10px);

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

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-xs:   0.70rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  clamp(1.3rem, 2.2vw, 1.65rem);
  --text-3xl:  clamp(1.65rem, 3vw, 2.25rem);
  --text-4xl:  clamp(2rem, 4vw, 3.2rem);
  --text-5xl:  clamp(2.6rem, 5.5vw, 4.8rem);
  --text-hero: clamp(3.4rem, 8.5vw, 7.5rem);

  --leading-tight:  1.10;
  --leading-snug:   1.32;
  --leading-normal: 1.58;
  --leading-loose:  1.82;

  --tracking-tight:   -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.14em;
  --tracking-widest:  0.22em;

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

  --section-y:   clamp(4.5rem, 9vw, 8rem);
  --container:   1380px;
  --gutter:      clamp(1.25rem, 4.5vw, 3.5rem);

  /* ── Shapes ─────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Elevation ──────────────────────────────────────────────────── */
  --shadow-sm:   0 2px 10px rgba(14, 10, 8, 0.12);
  --shadow:      0 5px 24px  rgba(14, 10, 8, 0.20);
  --shadow-lg:   0 12px 48px rgba(14, 10, 8, 0.30);
  --shadow-xl:   0 24px 72px rgba(14, 10, 8, 0.42);
  --shadow-gold: 0 4px 32px  rgba(201, 150, 58, 0.32);

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --dur-xslow:  700ms;

  /* ── Z-index ────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-float:   50;
  --z-overlay: 100;
  --z-nav:     200;
}