/* Mangwalow for Restaurants — design tokens.
 *
 * The whole surface is ink on warm paper. Saturated colour appears ONLY where
 * it carries operational meaning: store state, order ageing, destructive
 * actions. Nothing else is coloured — not headings, not icons, not links in
 * body text. If you are reaching for a colour to make something look nicer,
 * the answer is a hairline or a weight change instead.
 *
 * Numbers are the product: money, timers, order ids and counts are set in IBM
 * Plex Mono with tabular figures (`.num` in app.css). Prose is Inter. That
 * pairing is the type signature; do not add a display face.
 *
 * Every value here is deliberate. Add tokens, do not re-tune these.
 */
:root{
  /* Ink on paper. Colour is reserved for signals; see the design thesis. */
  --mw-ink:#171310; --mw-ink-2:#4A423C; --mw-slate:#6B6560;
  --mw-paper:#FBF9F7; --mw-surface:#FFFFFF; --mw-sunken:#F4F0EC;
  --mw-line:#EAE4DE; --mw-line-strong:#D8D0C8;

  /* Signals only. */
  --mw-coral:#FF5733;        /* brand accent, large fills, borders */
  --mw-coral-600:#E4431F;    /* hover */
  --mw-coral-700:#C63D1E;    /* text and small fills — the AA-safe one */
  --mw-coral-wash:#FFF1EC;
  --mw-amber:#FFC300; --mw-amber-700:#8A6300; --mw-amber-wash:#FFF8E1;
  --mw-jade:#1F7A5C; --mw-jade-wash:#EAF5F0;
  --mw-signal:#B3241C; --mw-signal-wash:#FDEEEC;
  --mw-night:#211C18;        /* offline chrome */

  --mw-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mw-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --mw-urdu:'Noto Naskh Arabic',serif;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --shadow-pop:0 6px 24px -8px rgba(23,19,16,.18),0 1px 2px rgba(23,19,16,.06);

  --ease:cubic-bezier(.2,0,0,1); --dur-micro:120ms; --dur-panel:200ms;
  --nav-w:240px; --nav-w-collapsed:64px; --topbar-h:56px;
  /* The phone's bottom bar. A real 60px of chrome that content must clear, so
     it is a token rather than a number repeated in four places. */
  --mobilenav-h:60px;
}