/* Bakery design tokens (Designer).
   Palette: warm flour-cream light, deep cocoa-brown dark, ONE accent: baked-crust terracotta.
   Contrast (WCAG AA): --ink on --bg 14:1; --muted on --bg 6.5:1; --accent on --bg 4.9:1;
   --on-accent on --accent 5.4:1; --cream on --dark 15:1; --accent-bright on --dark 7:1.
   Type: system fonts only; display = serif stack (warm, bakery-like), body = system sans.
   Motion: one easing, 400-900 ms, 60 ms stagger; animate transform/opacity/filter only. */
:root {
  /* palette */
  --bg: #fbf5ec;
  --surface: #fffaf2;
  --surface-2: #f3e8d8;
  --ink: #2a1a12;
  --muted: #6b5444;
  --line: #e4d4bf;
  --accent: #b4491f;
  --accent-strong: #8f3715;
  --accent-bright: #f08a5d;   /* accent on dark sections */
  --on-accent: #ffffff;
  --dark: #1f130d;
  --dark-2: #2d1c13;
  --cream: #fbf5ec;
  --cream-muted: #cdb9a4;
  --ok: #2f6b3a;
  --error: #b3261e;
  --focus: #1b5fd1;

  /* gradients and glow (CSS only) */
  --grad-text: linear-gradient(100deg, #b4491f 0%, #e0832f 50%, #b4491f 100%);
  --grad-text-dark: linear-gradient(100deg, #f08a5d 0%, #ffd29a 50%, #f08a5d 100%);
  --glow: radial-gradient(60% 60% at 50% 40%, rgba(224,131,47,.28), rgba(224,131,47,0) 70%);
  --grad-warm: linear-gradient(160deg, #fff6e8 0%, #f3e0c6 100%);

  /* type families */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* type scale (fluid) */
  --fs-hero: clamp(3rem, 1.2rem + 8vw, 7rem);
  --fs-display: clamp(2.4rem, 1rem + 5.5vw, 5rem);
  --fs-h2: clamp(2rem, 1rem + 3.6vw, 3.75rem);
  --fs-h3: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  --fs-step: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  --fs-giant: clamp(5rem, 2rem + 18vw, 16rem);
  --fs-lead: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-label: .75rem;
  --ls-tight: -.035em;
  --ls-snug: -.02em;
  --ls-label: .14em;
  --lh-tight: .98;
  --lh-head: 1.08;
  --lh-body: 1.65;
  --measure: 65ch;

  /* spacing, layout */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem;
  --section: clamp(5rem, 12vw, 10rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --max: 78rem;

  /* shape and shadow */
  --radius-s: .5rem;
  --radius: 1.1rem;
  --radius-l: 1.75rem;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgba(42,26,18,.06), 0 2px 8px rgba(42,26,18,.05);
  --shadow: 0 4px 12px rgba(42,26,18,.07), 0 18px 40px rgba(42,26,18,.09);
  --shadow-l: 0 10px 30px rgba(42,26,18,.12), 0 30px 70px rgba(42,26,18,.14);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 400ms;
  --dur: 650ms;
  --dur-slow: 900ms;
  --stagger: 60ms;
  --marquee-speed: 60s;
}

/* helpers for gradient text and glow */
.text-grad {
  background: var(--grad-text);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.on-dark .text-grad {
  background-image: var(--grad-text-dark);
}
@media (prefers-reduced-motion: no-preference) {
  .text-grad { animation: grad-sweep 8s linear infinite; }
}
@keyframes grad-sweep { to { background-position: -200% 0; } }

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