/* ============================================================
   Guanacos Tech — Design Tokens
   Source of truth for color, type, motion, spacing, radii.
   Edit here; the rest of the styles consume these variables.

   THEME: warm ivory (light). Surfaces run light→white; text runs
   near-black→warm-grey; gold stays bright for FILLS (buttons, dots)
   and darkens (gold-500 / gold-700) when used as TEXT so it passes
   contrast on cream.
   ============================================================ */

:root {
  /* ---------- Surface (warm light scale) ---------- */
  --bg-0: #f5f0e6;            /* page base — warm ivory */
  --bg-1: #efe8d8;            /* section band — deeper parchment, lets white cards lift */
  --bg-2: #fffdf8;            /* cards — warm near-white */
  --bg-3: #ffffff;            /* hover / elevated */
  --bg-4: #ffffff;            /* highest elevation */

  /* ---------- Lines & dividers (dark-on-light) ---------- */
  --line-faint: rgba(28, 24, 14, 0.06);
  --line-soft:  rgba(28, 24, 14, 0.10);
  --line-mid:   rgba(28, 24, 14, 0.18);
  --line-gold:  rgba(168, 128, 40, 0.34);
  --line-gold-strong: rgba(168, 128, 40, 0.55);

  /* ---------- Gold scale (champagne → deep) ---------- */
  --gold-50:  #f8efd2;
  --gold-100: #ecd58a;
  --gold-200: #ddc275;
  --gold-300: #d4af5a;        /* PRIMARY ACCENT — fills (buttons, dots, glows) */
  --gold-400: #c79c44;
  --gold-500: #b58c3a;        /* gold for medium emphasis TEXT on light */
  --gold-700: #7d5e21;        /* deep gold for small TEXT / links on light */
  --gold-900: #3a2b0e;

  /* ---------- Accent (semantic gold-for-text) ----------
     Deep gold on cream; flips bright inside [data-invert] dark sections. */
  --accent-text: #7d5e21;     /* small text — eyebrows, kickers, labels, links */
  --accent-em:   #b58c3a;     /* large emphasis — display italics, tags */

  /* ---------- Text scale (dark, on the warm-light base) ---------- */
  --text-100: #15140f;        /* headings — deep warm near-black */
  --text-200: #28261d;        /* body default */
  --text-300: #4f4c40;        /* secondary body */
  --text-400: #6a6759;        /* muted */
  --text-500: #837f6d;        /* faint meta */
  --text-600: #b6b2a2;        /* hairline / disabled */

  /* ---------- Ink (text that sits ON gold / bright fills) ---------- */
  --ink-100: #15140f;
  --ink-200: #1f2024;
  --ink-300: #4b4d54;
  --ink-400: #7a7c84;

  /* ---------- Light accent surfaces ---------- */
  --surface-cream:        #f7f3ea;                 /* warm off-white */
  --surface-cream-soft:   #fbf8f0;                 /* lighter cream for hover */
  --surface-light-frost:  rgba(255, 255, 255, 0.55);
  --text-on-light:        #15140f;                 /* deep warm-black for text on cream */
  --text-on-light-muted:  rgba(20, 18, 12, 0.78);  /* ~6.4:1 on cream */
  --border-on-light:      rgba(20, 18, 12, 0.10);
  --gold-ink:             #7d5e21;                 /* dark gold for links/text on cream */

  /* ---------- Glow & shadow (soft, warm — tuned for light) ---------- */
  --glow-gold-soft:  0 0 60px rgba(176, 138, 52, 0.12);
  --glow-gold-mid:   0 0 90px rgba(176, 138, 52, 0.18);
  --glow-gold-edge:  0 0 1px rgba(176, 138, 52, 0.5);
  --shadow-card:     0 26px 60px -30px rgba(54, 44, 18, 0.30);
  --shadow-card-sm:  0 14px 34px -22px rgba(54, 44, 18, 0.22);
  --shadow-cta:      0 16px 40px -12px rgba(176, 138, 52, 0.40);
  --shadow-cta-hover:0 22px 56px -12px rgba(176, 138, 52, 0.52);
  --shadow-btn-bloom:0 26px 70px -10px rgba(176, 138, 52, 0.50);
  --glow-progress:   0 0 8px rgba(176, 138, 52, 0.50);

  /* ---------- Radii ---------- */
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 18px;
  --r-6: 24px;
  --r-pill: 999px;

  /* ---------- Spacing scale ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Typography ---------- */
  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Serif", "Fraunces", "Inter", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* fluid type ramp */
  --fs-eyebrow: 0.74rem;
  --fs-body:    1.04rem;
  --fs-lead:    clamp(1.08rem, 1.4vw, 1.28rem);
  --fs-h3:      clamp(1.24rem, 1.6vw, 1.45rem);
  --fs-h2:      clamp(2.2rem, 4.6vw, 4.2rem);
  --fs-h1:      clamp(3rem, 7.2vw, 6.8rem);

  --lh-tight: 0.96;
  --lh-snug:  1.12;
  --lh-body:  1.7;

  --tracking-eyebrow: 0.18em;
  --tracking-display: -0.02em;

  /* ---------- Motion (timing & curves) ---------- */
  --t-fast:   180ms;
  --t-mid:    320ms;
  --t-slow:   620ms;
  --t-cine:   900ms;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-counter:   cubic-bezier(0.0, 0.0, 0.2, 1);

  /* ---------- Layout ---------- */
  --w-shell: 1240px;
  --w-narrow: 920px;
  --gutter: clamp(22px, 5vw, 72px);
  --header-h: 80px;
}

/* Reduced-motion: collapse all motion variables so animations resolve to no-op */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-mid:  0.01ms;
    --t-slow: 0.01ms;
    --t-cine: 0.01ms;
  }
}