/* ============================================================
   Fire & Smoke BBQ — Design Tokens
   Single source: DESIGN-SYSTEM.md  ·  dark-only, warm-tinted
   ============================================================ */
:root {
  /* — Color primitives (oklch, warm-tinted) — */
  --ink-950: oklch(0.15 0.010 55);
  --ink-900: oklch(0.19 0.012 54);
  --ink-850: oklch(0.23 0.014 52);
  --ink-800: oklch(0.30 0.014 52);
  --ink-300: oklch(0.70 0.014 65);
  --ink-100: oklch(0.93 0.012 75);

  --ember-600: oklch(0.62 0.17 46);
  --ember-500: oklch(0.70 0.17 52);   /* ACCENT */
  --ember-400: oklch(0.76 0.16 58);
  --char-600:  oklch(0.52 0.16 32);   /* ember-red — glow only */

  /* — Semantic — */
  --bg: var(--ink-950);
  --surface: var(--ink-900);
  --surface-raised: var(--ink-850);
  --text: var(--ink-100);
  --text-muted: var(--ink-300);
  --border: oklch(0.93 0.012 75 / 0.08);
  --border-strong: var(--ink-800);

  --accent: var(--ember-500);
  --accent-hover: var(--ember-400);
  --accent-active: var(--ember-600);
  --accent-ink: oklch(0.17 0.02 50);  /* dark text on orange — AA */
  --glow: var(--char-600);

  --success: oklch(0.66 0.13 145);
  --warning: oklch(0.80 0.13 75);
  --error:   oklch(0.58 0.18 28);

  /* — Type — */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  --fs-display: clamp(3.5rem, 1.2rem + 9vw, 9rem);
  --fs-h1:      clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h3:      clamp(1.375rem, 1.1rem + 1.3vw, 2rem);
  --fs-lead:    clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small:   0.875rem;
  --fs-kicker:  0.8125rem;

  /* — Spacing (fluid) — */
  --space-2xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);
  --space-xs:  clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --space-sm:  clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-md:  clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  --space-lg:  clamp(2.5rem, 2rem + 2vw, 4rem);
  --space-xl:  clamp(4rem, 3rem + 4vw, 7rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 10rem);
  --edge:      clamp(1.25rem, 0.5rem + 3.5vw, 5rem);

  /* — Radius / shadow / blur / z — */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;
  --shadow-card: 0 1px 0 oklch(1 0 0 / .03) inset, 0 14px 34px -16px oklch(0 0 0 / .75);
  --glow-ember: 0 0 44px -8px oklch(0.70 0.17 52 / .45);
  --blur-overlay: 14px;
  --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500;

  /* — Motion — */
  --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 600ms; --dur-reveal: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-ember: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* — Grid — */
  --container: 1320px;
  --gutter: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}