/* ============================================================
   CRUNCH — Design tokens (black & white brand)
   Single source of truth. Everything else consumes these.
   Var names kept for compatibility; values are monochrome.
   ============================================================ */
:root {
  /* — Color — */
  --c-char: #0E0E0E;        /* black: dark sections, primary text on light */
  --c-smoke: #565656;       /* secondary text on light */
  --c-cream: #FFFFFF;       /* page background (white) */
  --c-paper: #F4F4F4;       /* card / alt-section background */
  --c-line: #E6E6E6;        /* hairlines */
  --c-flame: #111111;       /* accent (black) */
  --c-flame-deep: #000000;  /* button bg / accent text on light */
  --c-mustard: #FFFFFF;     /* light accent used on dark sections */
  --c-lettuce: #1E7D32;     /* "open now" status only */
  --c-white: #FFFFFF;
  --c-char-80: rgb(14 14 14 / .8);

  /* — Type — */
  --font-display: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-900: clamp(2.75rem, 1.5rem + 6.5vw, 6.5rem);
  --fs-800: clamp(2rem, 1.2rem + 3.5vw, 3.75rem);
  --fs-700: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --fs-600: 1.25rem;
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: .875rem;
  --fs-200: .75rem;

  /* — Space (4px base) — */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem;
  --section-pad: clamp(3.5rem, 8vw, 7rem);

  /* — Radius — */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px;

  /* — Shadow (neutral) — */
  --shadow-1: 0 1px 3px rgb(0 0 0 / .08);
  --shadow-2: 0 6px 20px rgb(0 0 0 / .12);
  --shadow-3: 0 16px 44px rgb(0 0 0 / .18);

  /* — Motion — */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 150ms; --t-med: 280ms; --t-slow: 520ms;

  /* — Layout — */
  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 64px;
}
@media (min-width: 1024px) {
  :root { --header-h: 72px; }
}