/* ==========================================================================
   tokens.css
   Token DECLARATIONS only. Every value here is a NEUTRAL, unbranded fallback
   so the site is legible and contrast-safe before a tenant theme loads.

   The tenant's /config/tenants/<slug>/theme.css is injected by loadConfig()
   AFTER this file and re-declares the same :root custom properties, so it
   always wins. Nothing in /styles or /src may contain a literal color or
   font family outside this file.

   Reskin surface (set these six in theme.css and everything else follows):
     --color-ink  --color-paper  --color-chile
     --color-lime --color-smoke  --color-surface
   ========================================================================== */

:root {
  /* --- Core palette ------------------------------------------------------
     Neutral placeholders. Chosen so that, unthemed, every pairing used in
     components.css still clears WCAG AA. */
  --color-ink: #1C2128;      /* deep surface: header, hero, footer */
  --color-paper: #F0EDE6;    /* receipt stock: ticket, cart, confirmation */
  --color-chile: #A6392A;    /* single hot accent: CTAs and price emphasis */
  --color-lime: #6F8F38;     /* success and ready states, used sparingly */
  --color-smoke: #5A616E;    /* secondary text, dividers */
  --color-surface: #FFFFFF;  /* body background */

  /* --- Derived surface and text tokens -----------------------------------
     All computed from the six above, so a tenant never sets these. */
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-smoke);
  --color-on-ink: var(--color-paper);
  --color-on-ink-muted: color-mix(in srgb, var(--color-paper) 72%, var(--color-ink));
  --color-on-chile: var(--color-surface);
  --color-on-lime: var(--color-ink);
  --color-on-paper: var(--color-ink);
  --color-on-paper-muted: color-mix(in srgb, var(--color-smoke) 88%, var(--color-ink));

  --color-ink-raised: color-mix(in srgb, var(--color-ink) 92%, var(--color-surface));
  --color-ink-sunken: color-mix(in srgb, var(--color-ink) 88%, #000000);
  --color-paper-shade: color-mix(in srgb, var(--color-paper) 88%, var(--color-ink));
  --color-surface-sunken: color-mix(in srgb, var(--color-surface) 94%, var(--color-ink));

  --color-line: color-mix(in srgb, var(--color-ink) 14%, transparent);
  --color-line-strong: color-mix(in srgb, var(--color-ink) 30%, transparent);
  --color-line-on-ink: color-mix(in srgb, var(--color-paper) 20%, transparent);
  --color-line-ticket: color-mix(in srgb, var(--color-ink) 32%, transparent);

  --color-chile-hover: color-mix(in srgb, var(--color-chile) 86%, var(--color-ink));
  --color-chile-wash: color-mix(in srgb, var(--color-chile) 10%, var(--color-surface));
  --color-lime-wash: color-mix(in srgb, var(--color-lime) 18%, var(--color-surface));

  /* The lime slot carries "open / ready". Tenants set it to anything from an
     olive green to a vivid yellow, and a vivid one cannot clear AA as text on a
     light surface. This darkened derivation keeps the same semantic on light
     backgrounds; the raw token is used only on ink. */
  --color-ready-on-light: color-mix(in srgb, var(--color-lime) 45%, var(--color-ink));

  /* Tile fallback for missing menu photography (see tileFallback in menu.js) */
  --tile-bg: color-mix(in srgb, var(--color-paper) 82%, var(--color-ink));
  --tile-bg-alt: color-mix(in srgb, var(--color-paper) 92%, var(--color-chile));
  --tile-ink: color-mix(in srgb, var(--color-ink) 84%, var(--color-paper));
  --tile-rule: color-mix(in srgb, var(--color-ink) 16%, transparent);

  /* Focus. Two tokens so the ring stays visible on light and dark surfaces
     alike. Never replaced by outline: none anywhere in this build. */
  --color-focus: var(--color-chile);
  --color-focus-on-ink: var(--color-lime);
  --focus-width: 3px;
  --focus-offset: 2px;

  /* Status */
  --color-status-new: var(--color-chile);
  --color-status-making: var(--color-smoke);
  --color-status-ready: var(--color-lime);
  --color-status-done: var(--color-smoke);

  /* --- Type --------------------------------------------------------------
     Display face is reserved for the hero line, category headers and prices.
     Mono is reserved for the ticket, order numbers and pickup times, so mono
     always means "this is your order". */
  --font-display: system-ui, "Segoe UI", sans-serif;
  --font-body: system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 700;

  /* Fluid scale, 375px to 1280px viewport */
  --step--2: 0.6875rem;
  --step--1: clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem);
  --step-0: clamp(1rem, 0.98rem + 0.11vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.08rem + 0.20vw, 1.25rem);
  --step-2: clamp(1.375rem, 1.28rem + 0.41vw, 1.625rem);
  --step-3: clamp(1.625rem, 1.44rem + 0.79vw, 2.125rem);
  --step-4: clamp(2rem, 1.60rem + 1.72vw, 3.0625rem);
  --step-5: clamp(2.5rem, 1.83rem + 2.85vw, 4.25rem);

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-body: 1.55;
  --leading-loose: 1.7;

  --tracking-display: -0.02em;
  --tracking-label: 0.08em;
  --tracking-mono: 0.01em;

  /* --- Space -------------------------------------------------------------
     --space-scale is a tenant knob; every step multiplies through it. */
  --space-scale: 1;
  --space-unit: 0.25rem;
  --space-1: calc(var(--space-unit) * 1 * var(--space-scale));
  --space-2: calc(var(--space-unit) * 2 * var(--space-scale));
  --space-3: calc(var(--space-unit) * 3 * var(--space-scale));
  --space-4: calc(var(--space-unit) * 4 * var(--space-scale));
  --space-5: calc(var(--space-unit) * 6 * var(--space-scale));
  --space-6: calc(var(--space-unit) * 8 * var(--space-scale));
  --space-7: calc(var(--space-unit) * 12 * var(--space-scale));
  --space-8: calc(var(--space-unit) * 16 * var(--space-scale));
  --space-9: calc(var(--space-unit) * 24 * var(--space-scale));

  /* --- Shape -------------------------------------------------------------
     radius-pill is for genuine pill or sticker elements only. Buttons in this
     build are square-shouldered by house rule. */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --border-hair: 1px;
  --border-solid: 2px;

  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-flat: 0 1px 0 var(--color-line);
  --shadow-sheet: 0 -2px 8px rgba(0, 0, 0, 0.10), 0 -18px 48px rgba(0, 0, 0, 0.18);

  /* --- Motion ------------------------------------------------------------
     One orchestrated moment (the ticket print). Everything else is 150ms. */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --dur-fast: 120ms;
  --dur-base: 150ms;
  --dur-print: 260ms;
  --print-stagger: 55ms;

  /* --- Layout ------------------------------------------------------------ */
  --measure: 62ch;
  --wrap-max: 76rem;
  --wrap-gutter: var(--space-4);
  --header-h: 3.5rem;
  /* The header pads itself out past a notch, so anything that sticks beneath it
     or scrolls under it must offset by the padded height, not the bare one. */
  --header-total: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  --viewbar-h: 0rem;  /* raised by components.css when the mobile order bar shows */
  --ticket-w: 22rem;
  --tap-min: 44px;

  --z-base: 1;
  --z-sticky: 20;
  --z-header: 30;
  --z-viewbar: 40;
  --z-demo: 60;

  /* Hero treatment variant, read by menu.js and mirrored onto a class.
     "ink" or "paper". */
  --hero-variant: ink;
}

@media (min-width: 40rem) {
  :root {
    --wrap-gutter: var(--space-6);
    --header-h: 4rem;
  }
}