/* ============================================================
   moosehaus.io — design tokens
   The single source of truth for the visual identity.
   Change a value here and it propagates across every page.
   ============================================================ */

:root {
  /* ---- palette: mid-century modern ---- */
  --cream:        #F4EDDD;   /* page background */
  --cream-deep:   #EAE0C8;   /* card shadows, subtle fills */
  --paper:        #FBF6EA;   /* card surfaces */

  --orange:       #D97757;   /* primary accent (Claude terracotta) */
  --orange-deep:  #B85C3A;   /* hover / borders on orange */

  --mustard:      #D9A441;   /* secondary accent */
  --forest:       #2E4437;   /* dark green sections */
  --forest-deep:  #24362C;   /* darker green, inset surfaces */
  --sage:         #8A9B7C;   /* muted green, labels */

  --walnut:       #3B2F24;   /* headings, borders, footer */
  --ink:          #33302A;   /* body text */
  --ink-soft:     #4C463C;   /* secondary body text */

  /* on-dark text colors (for .band-forest sections) */
  --on-forest:        #F4EDDD;
  --on-forest-soft:   #CFD8C8;
  --on-forest-faint:  #9FAE95;

  /* ---- typography ---- */
  --font-display: 'Jost', sans-serif;    /* headings, nav, buttons */
  --font-body:    'Karla', sans-serif;   /* paragraphs, UI copy */

  --text-hero:    clamp(2.6rem, 5.4vw, 4.2rem);
  --text-h2:      clamp(1.9rem, 3.4vw, 2.6rem);
  --text-h3:      1.5rem;
  --text-lede:    1.15rem;
  --text-body:    1rem;
  --text-small:   0.88rem;

  /* ---- shape & layout ---- */
  --radius-card:  14px;
  --radius-pill:  999px;
  --border-heavy: 2px solid var(--outline);
  --shadow-card:  6px 6px 0 var(--shadow-tint);
  --shadow-btn:   3px 3px 0 var(--shadow-ink);

  --maxw:         1120px;
  --pad-x:        28px;
  --section-y:    96px;

  /* ---- motion ---- */
  --ease-snap:    140ms ease;
  --ease-lift:    180ms ease;
}