/* ============================================================
   FOX 2.0 — DESIGN TOKENS
   The single source of truth for The Fox At Walton's visual system.
   Every other stylesheet consumes from here.
   ============================================================ */

:root {
  /* ---------- Palette ---------- */
  /* Creams (page surfaces, alt sections, voucher artwork) */
  --c-cream:        #FBF8F3;   /* default page surface */
  --c-cream-warm:   #F1E9D8;   /* alt sections, voucher band */
  --c-cream-deep:   #E8DFC8;   /* deeper alt, dividers on cream */
  --c-pure:         #FAFAF8;   /* near-white for photo-led sections */

  /* Inks (text, dark surfaces) */
  --c-ink:          #272626;   /* primary text, dark CTA bg */
  --c-ink-soft:     #5a5450;   /* secondary text */
  --c-ink-mute:     #8a8580;   /* tertiary, captions */
  --c-hairline:     #C5BFB1;   /* hairline rules on cream */
  --c-rule:         #e5e5e5;   /* hairline rules on white */

  /* Brand */
  --c-green:        #429d61;   /* primary CTA, brand accent */
  --c-green-deep:   #2f7547;   /* hover, deeper states */
  --c-green-mute:   rgba(66,157,97,0.12); /* tag backgrounds */

  /* Editorial accent — used sparingly (pull quotes, section markers) */
  --c-rust:         #8B3A1F;
  --c-forest:       #2D4A2B;

  /* States */
  --c-focus:        var(--c-green);
  --c-error:        #B14747;

  /* ---------- Typography ---------- */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-script:  'Allura', cursive; /* reserved for editorial pull moments */

  /* Type scale — fluid via clamp() */
  --text-xs:    0.75rem;                                  /* 12 */
  --text-sm:    0.875rem;                                 /* 14 */
  --text-base:  1rem;                                     /* 16 */
  --text-md:    1.0625rem;                                /* 17 */
  --text-lg:    clamp(1.125rem, 0.95rem + 0.4vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  --text-2xl:   clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
  --text-3xl:   clamp(2rem, 1.4rem + 2vw, 2.75rem);
  --text-4xl:   clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
  --text-5xl:   clamp(3rem, 1.6rem + 5vw, 5rem);
  --text-hero:  clamp(3.25rem, 1.5rem + 7vw, 7rem);

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.6;
  --lh-loose:   1.75;

  /* Letter spacing */
  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-eyebrow:0.22em;

  /* ---------- Spacing ---------- */
  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.25rem;
  --s-6:   1.5rem;
  --s-8:   2rem;
  --s-10:  2.5rem;
  --s-12:  3rem;
  --s-16:  4rem;
  --s-20:  5rem;
  --s-24:  6rem;
  --s-32:  8rem;

  /* Section rhythm — generous, editorial */
  --s-section:        clamp(4rem, 9vw, 7rem);
  --s-section-tight:  clamp(2.5rem, 6vw, 4rem);
  --s-section-loose:  clamp(5rem, 11vw, 9rem);

  /* ---------- Containers ---------- */
  --container-narrow: 760px;   /* long-form text */
  --container:        1200px;  /* default */
  --container-wide:   1440px;  /* editorial moments */
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Radii ---------- */
  --r-xs:    2px;
  --r-sm:    4px;
  --r:       6px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-pill:  9999px;

  /* ---------- Shadows ---------- */
  --shadow-rise:        0 12px 28px -18px rgba(39,38,38,0.22);
  --shadow-rise-hover:  0 22px 44px -22px rgba(39,38,38,0.30);
  --shadow-card:        0 18px 40px -24px rgba(39,38,38,0.25);
  --shadow-photo:       0 30px 60px -25px rgba(39,38,38,0.35);
  --shadow-pinned:      0 1px 0 0 var(--c-rule);

  /* ---------- Motion ---------- */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft:       cubic-bezier(0.33, 1, 0.68, 1);

  --dur-fast:     180ms;
  --dur:          320ms;
  --dur-slow:     600ms;
  --dur-reveal:   900ms;
  --dur-photo:    1200ms;

  /* ---------- Z-index scale ---------- */
  --z-base:      1;
  --z-rise:      10;
  --z-overlay:   20;
  --z-nav:       50;
  --z-modal:     100;
}

/* ---------- Honour reduced motion globally ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0.01ms;
    --dur:        0.01ms;
    --dur-slow:   0.01ms;
    --dur-reveal: 0.01ms;
    --dur-photo:  0.01ms;
  }
}