/* css/tokens.css — VRAJ design tokens */
:root {
  /* ---------- Colors ---------- */
  --c-cream:      #f5ede1;
  --c-silk:       #ece0cd;
  --c-champagne:  #e5d4b8;
  --c-gold:       #a07a3d;
  --c-bronze:     #8b6b3a;
  --c-brown:      #3a2e1e;
  --c-mocha:      #6a5840;
  --c-offwhite:   #faf6ed;
  --c-ink:        #1a1a1a;

  /* Semantic aliases */
  --bg:           var(--c-cream);
  --bg-alt:       var(--c-offwhite);
  --bg-dark:      var(--c-brown);
  --fg:           var(--c-mocha);
  --fg-strong:    var(--c-brown);
  --fg-muted:     #64543a;   /* darkened: 6.30:1 on cream (was #8a7a5e, 3.60:1 — WCAG fail) */
  --accent:       var(--c-gold);
  --accent-text:  #7a5c2c;  /* accessible gold for text: 5.33:1 on cream, 5.74:1 on off-white button */
  --accent-hover: var(--c-bronze);
  --border:       rgba(160, 122, 61, 0.15);

  /* ---------- Typography ---------- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Type scale — clamp for fluid resize */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --fs-sm:   clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --fs-lg:   clamp(1.15rem, 1.08rem + 0.4vw, 1.3rem);
  --fs-xl:   clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --fs-2xl:  clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --fs-3xl:  clamp(2.75rem, 2.2rem + 2.75vw, 4.5rem);
  --fs-4xl:  clamp(3.5rem, 2.7rem + 4vw, 6.5rem);

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.55;
  --lh-loose:  1.8;

  --tracking-widest: 0.32em;
  --tracking-wide:   0.12em;
  --tracking-tight:  -0.02em;

  /* ---------- Spacing (8pt grid) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Section vertical rhythm */
  --section-y: clamp(4rem, 8vw, 9rem);

  /* ---------- Layout ---------- */
  --max-w:       1400px;
  --max-w-text:  640px;
  --gutter:      clamp(1.25rem, 4vw, 3rem);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-silk:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:    0.35s;
  --dur:         0.8s;
  --dur-slow:    1.2s;
  --dur-xslow:   1.8s;

  /* ---------- Radius + shadow ---------- */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 12px;
  --shadow-sm: 0 2px 12px rgba(58, 46, 30, 0.06);
  --shadow:    0 10px 40px rgba(58, 46, 30, 0.08);
  --shadow-lg: 0 30px 80px rgba(58, 46, 30, 0.12);

  /* ---------- Z-index ---------- */
  --z-nav:    100;
  --z-fab:    90;
  --z-cursor: 9999;
  --z-modal:  1000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-xslow: 0.01ms;
  }
}