/* ==========================================================================
   KINTSUGI — Heridas convertidas en oro
   variables.css — Design tokens
   ========================================================================== */

:root {
  /* ---- Color: night ground ---- */
  --bg-0: #0c0716;
  --bg-1: #12091e;
  --bg-2: #1b102c;
  --bg-3: #2a1740;
  --bg-4: #31194d;

  /* ---- Color: text ---- */
  --text-primary: #f6f1e8;
  --text-secondary: #d9ccbc;
  --text-muted: #b6a995;

  /* ---- Color: gold seam ---- */
  --gold-light: #ffd76a;
  --gold: #f7c84b;
  --gold-mid: #e4b03f;
  --gold-deep: #d89a1e;
  --gold-ember: #b8741f;

  /* ---- Gradients ---- */
  --gradient-gold: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 45%, var(--gold-light) 65%, var(--gold) 85%);
  --gradient-veil: linear-gradient(180deg, rgba(12, 7, 22, 0) 0%, rgba(12, 7, 22, 0.16) 72%, rgba(12, 7, 22, 0.42) 100%);
  --gradient-hero-overlay: linear-gradient(100deg, rgba(10, 6, 18, 0.34) 0%, rgba(15, 9, 26, 0.18) 28%, rgba(20, 12, 34, 0.06) 52%, rgba(20, 12, 34, 0) 72%);
  --gradient-section: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);

  /* ---- Shadow ---- */
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-deep: 0 30px 90px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 0 40px rgba(247, 200, 75, 0.18);

  /* ---- Typography: faces ---- */
  --font-mark: "Pinyon Script", "Brush Script MT", cursive;       /* the Kintsugi wordmark only */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif; /* editorial headings */
  --font-body: "Cormorant Garamond", "Libre Baskerville", Georgia, serif;   /* long-form reading */
  --font-ui: "Manrope", "Inter", -apple-system, sans-serif;        /* nav, labels, buttons, captions */

  /* ---- Typography: scale (fluid) ---- */
  --fs-mark: clamp(4.2rem, 4rem + 5vw, 9rem);
  --fs-h1: clamp(2.4rem, 2rem + 2.2vw, 3.6rem);
  --fs-h2: clamp(1.9rem, 1.6rem + 1.4vw, 2.7rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.65rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-body: clamp(1.02rem, 0.98rem + 0.15vw, 1.15rem);
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.82rem;

  /* ---- Spacing ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.85rem;
  --space-sm: 1.4rem;
  --space-md: 2.2rem;
  --space-lg: 3.6rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;
  --space-3xl: 11rem;

  /* ---- Layout ---- */
  --content-max: 1280px;
  --content-narrow: 760px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --border-hairline: 1px solid rgba(247, 200, 75, 0.18);

  /* ---- Motion ---- */
  --ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.35s;
  --dur-mid: 0.7s;
  --dur-slow: 1.4s;

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-particles: 1;
}

@media (max-width: 640px) {
  :root {
    --space-xl: 3.6rem;
    --space-2xl: 5rem;
    --space-3xl: 6.5rem;
  }
}

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