/* =====================================================================
   Tableau · design tokens
   The menu board. Light is "Day board" (cream card and ink); dark is
   "Night board". --brass is the one accent (buttons, links, prices, the
   current tab); --alert is the warning red for required notices. The
   board (.board) is always a black split-flap board with cream letters
   and amber prices, whatever the mode. No neon, ever.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f3eee3;
  --card: #fbf8f1;
  --well: #e9e2d3;
  --line: #d6ccb8;
  --ink: #1b1915;
  --ink-2: #3b372f;
  --muted: #655d50;
  --brass: #855610;
  --brass-2: #6b450b;
  --on-brass: #ffffff;
  --brass-soft: #f2e3c4;
  --alert: #a8321d;
  --focus: #2f5bb5;
  --board: #15130f;                   /* the split-flap board, both modes */
  --flap: #322d26;                    /* one flap */
  --flap-2: #29251f;                  /* the lower half of a flap */
  --flap-ink: #f3ead8;                /* letters on the board */
  --flap-lit: #f0b23e;                /* prices and the live row on the board */
  --flap-muted: #a89f8e;              /* small print on the board */
  --board-line: #3a352c;
  --shadow-card: 0 1px 0 rgba(27, 25, 21, 0.06), 0 12px 26px -18px rgba(27, 25, 21, 0.4);
  --shadow-board: 0 2px 0 rgba(0, 0, 0, 0.2), 0 34px 60px -30px rgba(27, 25, 21, 0.7);

  --display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(52px, 7.6vw, 120px);
  --fs-h2: clamp(38px, 4.8vw, 68px);
  --fs-h3: 24px;
  --fs-lead: clamp(18px, 1.35vw, 21px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 12px;

  --wrap: 1220px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 4px;
  --r-m: 8px;
  --r-l: 14px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --flip: cubic-bezier(0.55, 0, 0.45, 1);
  --d-fast: 140ms;
  --d: 280ms;
  --d-slow: 700ms;
}

/* ---------- Night board ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #12110e;
    --card: #1b1915;
    --well: #16140f;
    --line: #332e26;
    --ink: #f3eee3;
    --ink-2: #d5cdbd;
    --muted: #a39a8a;
    --brass: #e3ad54;
    --brass-2: #f0c47a;
    --on-brass: #231703;
    --brass-soft: #33270f;
    --alert: #ff8f7a;
    --focus: #8fb0ff;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 26px -16px rgba(0, 0, 0, 0.8);
    --shadow-board: 0 0 0 1px #2a2620, 0 34px 60px -30px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #12110e;
  --card: #1b1915;
  --well: #16140f;
  --line: #332e26;
  --ink: #f3eee3;
  --ink-2: #d5cdbd;
  --muted: #a39a8a;
  --brass: #e3ad54;
  --brass-2: #f0c47a;
  --on-brass: #231703;
  --brass-soft: #33270f;
  --alert: #ff8f7a;
  --focus: #8fb0ff;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 26px -16px rgba(0, 0, 0, 0.8);
  --shadow-board: 0 0 0 1px #2a2620, 0 34px 60px -30px rgba(0, 0, 0, 0.9);
}