/* ─── Spicy Mo:Mo House · Design tokens ────────────────────────────────── */
:root {
  /* Paper & ink */
  --paper:        #FAF6F1;
  --paper-deep:   #F2EBE2;
  --ink:          #1A1410;
  --ink-soft:     #4A3F38;
  --ink-faint:    #7A6E64;
  --line:         rgba(26, 20, 16, 0.12);
  --line-strong:  rgba(26, 20, 16, 0.32);

  /* Steam pink — the hero accent */
  --steam:        #F4D5D0;
  --steam-deep:   #E8A8A0;
  --steam-glow:   #FBE6E2;

  /* Sichuan red — single saturated CTA */
  --chili:        #C8362A;
  --chili-deep:   #9E2A20;

  /* Gold — rare detail */
  --gold:         #B8954F;

  /* Spice level palette */
  --spice-1:      #E5C97A;
  --spice-2:      #DC8A4F;
  --spice-3:      #C8362A;

  /* Type ramp (clamp() for fluid) */
  --fs-display:   clamp(3.4rem, 9vw, 8.5rem);
  --fs-h1:        clamp(2.4rem, 5.5vw, 4.6rem);
  --fs-h2:        clamp(1.8rem, 3.6vw, 3rem);
  --fs-h3:        clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-lead:      clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body:      1rem;
  --fs-small:     0.84rem;
  --fs-micro:     0.72rem;

  /* Spacing scale */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4.5rem;
  --s-9:  6.5rem;
  --s-10: 9rem;

  /* Radii */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1);
  --d-fast:   180ms;
  --d-base:   320ms;
  --d-slow:   720ms;

  /* Layout */
  --max:       1440px;
  --gutter:    clamp(1.25rem, 4vw, 3.25rem);
  --col-gap:   clamp(1rem, 2vw, 2rem);
  --rule:      1px solid var(--line);

  /* Shadows */
  --shadow-soft:  0 1px 2px rgba(26,20,16,0.04), 0 4px 16px rgba(26,20,16,0.06);
  --shadow-pop:   0 8px 28px rgba(26,20,16,0.10), 0 2px 6px rgba(26,20,16,0.06);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
