/* ============================================================
   Wolf in the Woods — Design Tokens
   Single source of truth for color, type, spacing, motion.
   Recreate these as Wix Studio "Site styles" / CSS variables.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --witw-paper:        #F7F4EF;  /* warm off-white page background */
  --witw-paper-2:      #F1ECE3;  /* slightly deeper section band   */
  --witw-white:        #FFFFFF;  /* cards, surfaces                */
  --witw-ink:          #1A1815;  /* warm near-black — primary text */
  --witw-ink-2:        #2A2621;  /* charcoal — dark bands          */
  --witw-gray:         #6B6459;  /* warm gray — secondary text     */
  --witw-gray-2:       #938B7E;  /* muted captions / placeholders  */
  --witw-line:         #E4DDD1;  /* warm hairline dividers         */
  --witw-line-strong:  #D6CCBB;  /* stronger hairline on hover     */
  --witw-wood:         #8A6D4B;  /* natural wood / walnut accent   */
  --witw-bronze:       #96754E;  /* restrained bronze — marks only */
  --witw-bronze-soft:  #B9986C;  /* bronze hover / focus glow      */
  --witw-success:      #3F6B4F;  /* confirmation states            */
  --witw-error:        #9B4A3A;  /* form error (warm, not red)     */
  --witw-error-bg:     #F6EAE6;

  /* On-dark equivalents */
  --witw-on-dark:      #F3EEE6;
  --witw-on-dark-mut:  #B7AFA2;

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Utility = body family, tracked + uppercase via classes (no 3rd family needed) */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-eyebrow:  0.75rem;                              /* 12px tracked label   */
  --fs-caption:  0.8125rem;                            /* 13px captions        */
  --fs-small:    0.9375rem;                            /* 15px fine print      */
  --fs-body:     clamp(1rem, 0.96rem + 0.2vw, 1.125rem);      /* 16–18 */
  --fs-lead:     clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);  /* 18–22 */
  --fs-h4:       clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);     /* 20–24 */
  --fs-h3:       clamp(1.5rem, 1.3rem + 1vw, 2rem);           /* 24–32 */
  --fs-h2:       clamp(2rem, 1.6rem + 2vw, 3.25rem);          /* 32–52 */
  --fs-h1:       clamp(2.75rem, 2rem + 3.8vw, 5.25rem);       /* 44–84 */

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --tracking-label: 0.16em;
  --tracking-wide:  0.04em;

  /* ---------- Spacing scale ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  /* Section vertical rhythm (editorial, fluid) */
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);

  /* ---------- Layout ---------- */
  --container:      1240px;
  --container-wide: 1440px;
  --container-text: 720px;   /* comfortable reading measure */
  --gutter:         clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

  /* ---------- Radius ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------- Shadows (soft, warm, restrained) ---------- */
  --shadow-sm: 0 1px 2px rgba(26, 24, 21, 0.05);
  --shadow-md: 0 8px 30px rgba(26, 24, 21, 0.08);
  --shadow-lg: 0 24px 60px rgba(26, 24, 21, 0.12);
  --shadow-focus: 0 0 0 3px rgba(150, 117, 78, 0.35);

  /* ---------- Motion ---------- */
  --dur-fast:  160ms;
  --dur-med:   280ms;
  --dur-slow:  560ms;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Header heights (for scroll offset + sticky math) ---------- */
  --header-h:      84px;
  --header-h-sm:   64px;   /* compacted on scroll */
  --mobile-bar-h:  68px;   /* sticky mobile conversion bar */
  --z-header: 100;
  --z-modal:  400;
  --z-mobile-bar: 300;
}