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

:root {
  /* ---------- Surface (dark scale) ---------- */
  --bg-0: #050506;            /* page base */
  --bg-1: #0a0a0c;            /* section raised */
  --bg-2: #0f0f12;            /* cards */
  --bg-3: #161619;            /* hover / elevated */
  --bg-4: #1d1d22;            /* highest elevation */

  /* ---------- Lines & dividers ---------- */
  --line-faint: rgba(255, 255, 255, 0.04);
  --line-soft:  rgba(255, 255, 255, 0.08);
  --line-mid:   rgba(255, 255, 255, 0.14);
  --line-gold:  rgba(212, 175, 90, 0.22);
  --line-gold-strong: rgba(212, 175, 90, 0.42);

  /* ---------- Gold scale (champagne → deep) ---------- */
  --gold-50:  #f8efd2;
  --gold-100: #ecd58a;
  --gold-200: #ddc275;
  --gold-300: #d4af5a;        /* PRIMARY ACCENT */
  --gold-400: #c79c44;
  --gold-500: #b58c3a;
  --gold-700: #7d5e21;
  --gold-900: #3a2b0e;

  /* ---------- Text scale (on dark) ---------- */
  --text-100: #ffffff;
  --text-200: #ebebee;
  --text-300: #b8babf;
  --text-400: #8a8c93;
  --text-500: #5d5f66;
  --text-600: #3f4148;

  /* ---------- Text scale (on light, when needed) ---------- */
  --ink-100: #0a0a0c;
  --ink-200: #1f2024;
  --ink-300: #4b4d54;
  --ink-400: #7a7c84;

  /* ---------- Light accent surfaces (used sparingly to break the dark) ---------- */
  --surface-cream:        #f7f3ea;                 /* warm off-white, pairs with gold */
  --surface-cream-soft:   #fbf8f0;                 /* lighter cream for hover */
  --surface-light-frost:  rgba(255, 255, 255, 0.04);
  --text-on-light:        #15140f;                 /* deep warm-black for text on cream */
  --text-on-light-muted:  rgba(20, 18, 12, 0.66);
  --border-on-light:      rgba(20, 18, 12, 0.08);
  --gold-ink:             #8a6d1c;                 /* dark gold for links/text on cream */

  /* ---------- Glow & shadow ---------- */
  --glow-gold-soft:  0 0 60px rgba(212, 175, 90, 0.14);
  --glow-gold-mid:   0 0 90px rgba(212, 175, 90, 0.22);
  --glow-gold-edge:  0 0 1px rgba(212, 175, 90, 0.6);
  --shadow-card:     0 30px 80px rgba(0, 0, 0, 0.52);
  --shadow-card-sm:  0 14px 36px rgba(0, 0, 0, 0.42);
  --shadow-cta:      0 18px 48px rgba(212, 175, 90, 0.22);
  --shadow-cta-hover:0 24px 70px rgba(212, 175, 90, 0.34);
  --shadow-btn-bloom:0 28px 80px rgba(212, 175, 90, 0.40);
  --glow-progress:   0 0 10px rgba(212, 175, 90, 0.55);

  /* ---------- 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: "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;
  }
}