/* After the Dishes — design tokens (homepage / kitchen hero is source of truth) */
:root {
  /* Warm farmhouse palette */
  --cream: #f8ede0;
  --cream-soft: #ebd3bc;
  --cream-card: #fff7ed;
  --kraft: #c4a574;
  --kraft-deep: #a25c38;
  --charcoal: #2c2420;
  --ink: #2c2420;
  --mute: #6a5346;
  --green: #8b4a32;
  --walnut: #3c2a22;
  --sage: #6b7a62;
  --stone: #8a8175;
  --danger: #6b2d2d;
  --danger-hover: #542222;
  --error: #9b2c2c;
  --placeholder: #8a7a6a;

  --header-bg: #3a271c;
  --header-text: #f7f1e6;
  --header-line: rgba(196, 165, 116, 0.4);

  --hairline: rgba(44, 36, 32, 0.16);
  --line: var(--hairline);
  --border-strong: rgba(44, 40, 37, 0.32);

  /* Typography */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Outfit", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --font-display: var(--serif);

  --text-body: 1.0625rem;
  --text-body-lg: 1.125rem;
  --text-small: 0.88rem;
  --text-kicker: 0.68rem;

  /* Layout */
  --wrap: min(1080px, calc(100% - 2.5rem));
  --wrap-narrow: min(720px, calc(100% - 2.5rem));

  --space-xs: 0.35rem;
  --space-sm: 0.65rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 3.25rem;

  /* Shape */
  --radius: 3px;
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 4px 20px rgba(44, 36, 32, 0.08);
  --shadow-header: 0 1px 0 rgba(247, 241, 230, 0.12);
  --shadow-drop: 0 18px 36px rgba(44, 40, 37, 0.18);

  /* Interactive */
  --link: var(--kraft-deep);
  --link-hover: var(--walnut);
  --focus-ring: 0 0 0 2px var(--cream), 0 0 0 4px var(--kraft-deep);

  --btn-primary-bg: var(--kraft-deep);
  --btn-primary-border: var(--kraft-deep);
  --btn-primary-text: var(--cream);
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--hairline);
  --btn-secondary-text: var(--charcoal);
  --tap-min: 48px;
}

@media (max-width: 768px) {
  :root {
    --wrap: min(1080px, calc(100% - 1.75rem));
    --wrap-narrow: min(720px, calc(100% - 1.75rem));
    --text-body: 1.0625rem;
  }
}

@media (max-width: 480px) {
  :root {
    --wrap: min(1080px, calc(100% - 1.5rem));
    --wrap-narrow: min(720px, calc(100% - 1.5rem));
  }
}