/* ============================================================
   tokens.css — Design Tokens
   The single source of truth for the visual language.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Palette: cinematic midnight + warm gold ---- */
  --color-ink-0:   #06050a;
  --color-ink-1:   #0b0a12;
  --color-ink-2:   #14121d;
  --color-ink-3:   #1d1a2b;

  --color-cream:   #f5ecdd;
  --color-gold:    #e8cda0;
  --color-gold-2:  #d9b27c;
  --color-rose:    #e3a7a0;
  --color-rose-2:  #c98a84;

  --color-text:        var(--color-cream);
  --color-text-soft:   rgba(245, 236, 221, 0.72);
  --color-text-faint:  rgba(245, 236, 221, 0.45);

  --color-accent:  var(--color-gold);
  --color-accent-2: var(--color-rose);

  --color-overlay:    rgba(6, 5, 10, 0.55);
  --color-overlay-hi: rgba(6, 5, 10, 0.78);
  --color-scrim:      linear-gradient(180deg, rgba(6,5,10,0) 0%, rgba(6,5,10,0.82) 100%);

  /* ---- Type ---- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-hero:      clamp(3.4rem, 9vw, 7.5rem);
  --text-title:     clamp(2.1rem, 5vw, 4.4rem);
  --text-chapter:   clamp(1.35rem, 3vw, 2.3rem);
  --text-lead:      clamp(1.1rem, 1.6vw, 1.4rem);
  --text-body:      1.05rem;
  --text-small:     0.86rem;
  --text-tiny:      0.74rem;

  --letter-spacing-display: 0.06em;
  --line-height-body: 1.75;

  /* ---- Spacing ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.75rem;
  --sp-4: 2.75rem;
  --sp-5: 4.5rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --content-max: 78rem;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   420ms;
  --dur-med:    850ms;
  --dur-slow:   1600ms;
  --dur-xslow:  2600ms;

  --blur-hero: 0px;              /* set to e.g. 6px for a dreamy soft-hero effect */
  --grain-opacity: 0.05;

  /* ---- Elevation ---- */
  --shadow-soft: 0 18px 60px -18px rgba(0, 0, 0, 0.75);
  --shadow-card: 0 24px 80px -24px rgba(0, 0, 0, 0.85);
  --ring-gold:   0 0 0 1px rgba(232, 205, 160, 0.35), 0 0 40px -6px rgba(232, 205, 160, 0.25);

  /* ---- Layout metrics ---- */
  --hero-ratio: 16 / 10;
  --scene-max-width: 92rem;

  /* ---- z-index scale ---- */
  --z-canvas: 0;
  --z-scene: 10;
  --z-timeline: 20;
  --z-hud: 40;
  --z-loader: 100;
}

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