/* ==========================================================================
   MUTTS & NUTTS — Design Tokens
   A warm, earthy, luxury-hospitality system.
   ========================================================================== */

:root {
  /* ------ Color · Warm neutrals ------ */
  --cream:        #FAF7F0;
  --cream-deep:   #F3EDE1;
  --cream-card:   #FFFDF8;
  --white:        #FFFFFF;

  /* ------ Color · Greens & earth ------ */
  --forest:       #22392B;
  --forest-deep:  #182B20;
  --forest-mid:   #35573F;
  --forest-tint:  #E6ECE3;
  --brown:        #8A6A4C;
  --brown-tint:   #EFE6D9;

  /* ------ Color · Accents ------ */
  --gold:         #B7955A;
  --gold-deep:    #9A7B45;
  --gold-tint:    #F0E6CF;

  /* ------ Color · Ink ------ */
  --ink:          #26251F;
  --ink-soft:     #55534A;
  --ink-faint:    #8B887C;
  --line:         rgba(38, 37, 31, 0.10);
  --line-strong:  rgba(38, 37, 31, 0.16);

  /* On-dark ink */
  --paper-on-dark:   rgba(250, 247, 240, 0.92);
  --muted-on-dark:   rgba(250, 247, 240, 0.62);
  --line-on-dark:    rgba(250, 247, 240, 0.16);

  /* ------ Typography ------ */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Manrope", "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale (min @360px → max @1440px) */
  --text-xs:   clamp(0.72rem, 0.69rem + 0.12vw, 0.8rem);
  --text-sm:   clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --text-base: clamp(0.98rem, 0.94rem + 0.2vw,  1.08rem);
  --text-md:   clamp(1.08rem, 1.02rem + 0.3vw,  1.28rem);
  --text-lg:   clamp(1.3rem,  1.18rem + 0.55vw, 1.68rem);
  --text-xl:   clamp(1.7rem,  1.45rem + 1.1vw,  2.45rem);
  --text-2xl:  clamp(2.1rem,  1.7rem + 1.9vw,   3.4rem);
  --text-hero: clamp(2.5rem,  1.85rem + 3.2vw,  4.7rem);

  /* ------ Spacing ------ */
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);   /* section padding */
  --space-7: clamp(5rem, 3.5rem + 6vw, 9rem);        /* grand section padding */

  /* ------ Layout ------ */
  --container: 76rem;
  --container-wide: 88rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ------ Radius ------ */
  --radius-sm: 0.625rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2.5rem;
  --radius-pill: 100rem;

  /* ------ Shadows (soft, warm) ------ */
  --shadow-sm: 0 1px 2px rgba(38, 37, 31, 0.05), 0 4px 12px rgba(38, 37, 31, 0.05);
  --shadow-md: 0 2px 6px rgba(38, 37, 31, 0.05), 0 14px 34px rgba(38, 37, 31, 0.09);
  --shadow-lg: 0 6px 16px rgba(38, 37, 31, 0.07), 0 30px 70px rgba(38, 37, 31, 0.14);
  --shadow-gold: 0 10px 30px rgba(183, 149, 90, 0.28);

  /* ------ Motion ------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --dur-fast: 180ms;
  --dur-med: 380ms;
  --dur-slow: 750ms;

  /* ------ Z layers ------ */
  --z-nav: 100;
  --z-menu: 200;
  --z-lightbox: 300;
  --z-loader: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med: 1ms;
    --dur-slow: 1ms;
  }
}