/* Rock the Meadow — Shared Design Tokens
   Aurora palette + type tokens, used across all 4 mockups. */

:root {
  /* === Aurora palette (from Inspo/aurora) ============================== */
  --color-white:        #FFFFFF;
  --color-cream:        #EFE4AE; /* butter cream — hero/brand accent */
  --color-cream-soft:   #F6EFCD; /* tinted variant for alternating bands */
  --color-forest:       #12281D; /* deep forest near-black — primary dark */
  --color-moss:         #4D5226; /* secondary accent */
  --color-taupe:        #625448; /* warm taupe — tertiary / metadata */

  /* Semantic aliases */
  --bg:                 var(--color-cream);
  --bg-alt:             var(--color-white);
  --bg-dark:            var(--color-forest);
  --ink:                var(--color-forest);
  --ink-on-dark:        var(--color-cream);
  --muted:              var(--color-taupe);
  --rule:               var(--color-moss);

  /* === Typography ===================================================== */
  /* Public Sans (Laurie hint) for display + body; DM Mono for eyebrows */
  --font-display: "Public Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Public Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "DM Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-eyebrow: 0.75rem;   /* 12 */
  --fs-body:    1.0625rem; /* 17 */
  --fs-lead:    1.25rem;   /* 20 */
  --fs-h3:      1.5rem;    /* 24 */
  --fs-h2:      2.5rem;    /* 40 */
  --fs-h1:      clamp(3rem, 8vw, 6.5rem);
  --fs-display: clamp(4rem, 14vw, 12rem);

  --lh-tight: 0.95;
  --lh-snug:  1.1;
  --lh-body:  1.55;

  --tracking-wide: 0.18em;
  --tracking-mega: -0.02em;

  /* === Spacing / layout =============================================== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --space-10: 10rem;

  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --border-w: 2px;
  --border-w-chunky: 3px;

  /* === Motion ========================================================= */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.5, 0, 0.1, 1);
  --dur-fast: 180ms;
  --dur-mid:  420ms;
  --dur-slow: 800ms;
}

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