/*
  Design tokens, shared by the customer menu and the owner's editing page so
  the two stay one visual system. Every component reads from these variables —
  never a hardcoded hex value.

  Palette: black and white, chosen by the owner. This is not a limitation but
  the point: a menu page is mostly food photography, and a monochrome frame
  makes those photos the only colour on screen, so they carry all the appetite
  appeal instead of competing with a coloured theme.

  The single exception is the error red in the editing interface (never shown
  to customers): a warning the owner could miss is a functional problem, not a
  styling one.
*/
:root {
  /* Accent: black. Prices, active chips, primary buttons. */
  --color-accent: #111111;
  --color-accent-contrast: #ffffff;

  /* Surfaces. */
  --color-background: #ffffff;
  --color-surface: #ffffff;

  /* Over the backdrop photo the owner may choose: a white veil that keeps text
     readable on a dark or busy shot, and a near-solid white for the bars that
     content scrolls underneath. Both are white with alpha rather than a token
     hex, because what has to show through is the photo behind them. */
  --color-veil: rgba(255, 255, 255, 0.62);
  --color-surface-sticky: rgba(255, 255, 255, 0.92);
  --color-surface-muted: #f2f2f2; /* photo placeholders, skeletons */
  --color-border: #e6e6e6;
  --color-border-strong: #111111;

  /* Text. */
  --color-text: #111111;
  --color-text-muted: #707070;

  /* Feedback — editing interface only, never the customer menu. */
  --color-success: #111111;
  --color-danger: #b00020;
  --color-danger-surface: #fdf0f1;

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-card: 12px;
  --radius-chip: 999px;
  --radius-control: 10px;
  --radius-photo: 10px;

  /* Deliberately flat: dividers and whitespace carry the structure instead of
     shadows, which read as dated next to a monochrome layout. */
  --shadow-card: none;

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

  --tap-target-min: 44px;
}