/* WhatToEat — brand design tokens (locked).
   Section 0. Do not hardcode these colors elsewhere; reference the variables. */
:root {
  /* Brand */
  --c-primary: #800020;        /* bordeaux */
  --c-primary-dark: #600018;
  --c-accent: #003d7b;         /* navy */
  --c-highlight: #659426;  /* text-highlighter band (.hl / nav hover) — kosher-icon green */

  /* Surfaces */
  --c-surface: #f4f1ec;        /* off-white page background (cards stay #fff and pop) */
  --c-bg-muted: #f3f4f6;       /* muted bg */
  --c-text: #1c1b1b;

  /* Danger / allergen warnings — deliberately brighter, distinct from bordeaux.
     #d4142a (was #e11d2e) clears WCAG-AA 4.5:1 as body text on white + --c-alert-bg. */
  --c-alert: #d4142a;
  --c-alert-bg: #fff1f1;
  --c-alert-border: #f6b9bd;

  /* Neutral helpers derived from brand */
  --c-line: #e7e3e1;
  --c-text-muted: #6b6764;
  --c-white: #ffffff;
  --c-success: #2e7d49;

  /* Type */
  --font-head: "Heebo", system-ui, sans-serif;
  --font-body: "Assistant", system-ui, sans-serif;

  /* Spacing / shape — calm, premium, lots of whitespace */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(28, 27, 27, 0.06);
  --shadow: 0 6px 24px rgba(28, 27, 27, 0.08);
  --shadow-up: 0 -8px 28px rgba(28, 27, 27, 0.12);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --header-h: 72px;
  --allergen-bar-h: 52px;
  --maxw: 720px; /* mobile-first; comfortable single-column max */
}