/* ==========================================================================
   Zatila design tokens  ·  v1  ·  30 October 2026
   --------------------------------------------------------------------------
   One file for colour, type, space, shape, elevation and motion across the
   kitchen tablet, the admin dashboard and zatila.com. It is written to become
   the app's theme as-is.

   Where it lives (ARCH §11.1): /css/tokens.css, moved here from /design/.
   - The app pages get it through /css/theme.css, which imports it.
   - The website (site.css) and the design preview link it directly.

   Sources
   - docs/design/RESEARCH.md §3, "The Zatila brief". Contrast ratios quoted
     here are WCAG 2.x and were re-checked from the hex values.
   - docs/design/MOTION-AND-POLISH.md (easing, durations, reduced motion).
   - brand/zatila-brand-kit (palette, fonts, radii).

   How to use
   - Components read ROLE tokens (--bg, --text, --ready …), never raw hex.
     The --z-* primitives exist so roles have one place to point at.
   - Light is the default. Dark comes from [data-theme="dark"] on any element,
     or from the OS setting when <html> has no data-theme.
     [data-theme="light"] forces light inside anything.
   - [data-surface="paper"] marks a work item: a ticket, task or prep row.
     Paper always reads Ink on Cream (dark theme) or Ink on White (light).
   - Restaurant colour: set the six --r-* inputs at runtime (CSSOM) after the
     accent check in RESEARCH §3.7. Components read --r-fill / --r-text only.
   - All sizes are rem, so they follow the text size. Never set a px
     font-size on <html>; the kitchen text-size control sets 100–150 %.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, SIL Open Font License (see /fonts/*-OFL.txt).
      Variable files; we use weights 400–700 only (never Light or Thin).
      - WOFF2 first (made from the kit's TTFs with fontTools, all glyphs
        kept); the TTF is the fallback. Preload the .woff2 files.
      - The weight range is declared as 400–700, so the browser clamps any
        other weight into it: a stray 800 renders as 700, a 300 as 400.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit[wght].woff2") format("woff2"),
       url("../fonts/Outfit[wght].ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono[wght].woff2") format("woff2"),
       url("../fonts/JetBrainsMono[wght].ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. Primitives (brand kit + the shades RESEARCH §3.1 derives).
      Do not use these in components. ¹ = in the guidelines PDF but not in the
      kit's token files. ² = derived: same hue, OKLCH lightness tuned to pass.
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --z-ink: #15171C;
  --z-saffron: #F5B335;
  --z-cream: #F7F2E8;
  --z-basil: #2F7D5B;
  --z-tomato: #C73A25;
  --z-white: #FFFFFF;

  /* Ink ramp */
  --z-ink-900: #0E0F12;          /* ¹ rail behind dark cards */
  --z-ink-700: #3D414A;
  --z-ink-500: #5B5F68;
  --z-ink-300: #A9ACB4;
  --z-ink-250: #B0B3BA;          /* ² text-3 in dark dialogs: 4.7:1 on fill-secondary over dark-3 (Ink-300 is 4.36) */
  --z-ink-200: #C9CBD1;          /* ¹ */

  /* Cream ramp and lines */
  --z-cream-200: #EFE8DA;
  --z-line: #E4DED2;
  --z-line-strong-light: #7C8088; /* ² 3.55:1 on Cream: input, toggle and checkbox borders */
  --z-line-strong-dark: #747881;  /* ² 4.05:1 on Ink */

  /* Dark surfaces: each step up is lighter (Apple's base and elevated) */
  --z-dark-1: #1C1E23;            /* ² cards */
  --z-dark-2: #24262B;            /* ² popovers */
  --z-dark-3: #2C2E34;            /* ² dialogs, toasts */

  /* Status shades for text and icons */
  --z-basil-text-light: #146848;  /* ² 6.1:1 on Cream (Basil itself is 4.48: fails) */
  --z-tomato-text-light: #B1220C; /* ² 6.1:1 on Cream */
  --z-basil-text-dark: #6BB792;   /* ² 7.5:1 on Ink */
  --z-tomato-text-dark: #FE8570;  /* ² 7.5:1 on Ink */

  /* Tints for chips and banners */
  --z-basil-tint-light: #EAF3EE;  /* ¹ */
  --z-tomato-tint-light: #FBECE9; /* ¹ */
  --z-saffron-tint-light: #FDEED3;
  --z-basil-tint-dark: #1B2D2A;
  --z-tomato-tint-dark: #3C1F1E;
  --z-saffron-tint-dark: #393020;
}


/* --------------------------------------------------------------------------
   3. Colour roles — LIGHT (default). Ratios are against --bg unless noted.
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Backgrounds and surfaces */
  --bg: var(--z-cream);                 /* page */
  --bg-well: var(--z-cream-200);        /* rails, sidebars, wells behind cards */
  --surface: var(--z-white);            /* cards (with --e1) */
  --surface-2: var(--z-white);          /* popovers (with --e2) */
  --surface-3: var(--z-white);          /* dialogs and toasts (with --e3) */
  --paper: var(--z-white);              /* work items; see [data-surface="paper"] */

  /* Text */
  --text: var(--z-ink);                 /* 16.1 on Cream, 17.9 on White */
  --text-2: var(--z-ink-700);           /* 9.2 */
  --text-3: var(--z-ink-500);           /* 5.7 (5.25 on Cream-200): meta, placeholders */
  --text-off: var(--z-ink-300);         /* 2.0: disabled only, never information */
  --text-3-dialog: var(--z-ink-500);    /* text-3 inside a dialog (theme.css .modal): the same on light */

  /* Lines */
  --line: var(--z-line);                /* hairlines, 1.2 */
  --line-strong: var(--z-line-strong-light);

  /* Saffron: fill only on light (1.65:1 as text). Never set it as text here. */
  --accent: var(--z-saffron);
  --on-accent: var(--z-ink);            /* 9.7 */
  --accent-text: var(--z-ink);          /* where dark mode uses Saffron text, light uses Ink */
  --eyebrow: var(--z-ink-500);          /* eyebrows: Ink-500 on light, Saffron on dark */

  /* Status. Always paired with a word or a timer, never colour alone. */
  --ready: var(--z-basil);              /* fill; White text on it 4.99 */
  --on-ready: var(--z-white);
  --ready-text: var(--z-basil-text-light);
  --ready-tint: var(--z-basil-tint-light);
  --on-ready-tint: var(--z-basil-text-light);   /* 5.98 */

  --late: var(--z-tomato);              /* fill; White text on it 5.17 */
  --on-late: var(--z-white);
  --late-text: var(--z-tomato-text-light);
  --late-tint: var(--z-tomato-tint-light);
  --on-late-tint: var(--z-tomato-text-light);   /* 5.89 */

  --new: var(--z-saffron);              /* NEW / needs attention: Ink text on it */
  --on-new: var(--z-ink);
  --new-text: var(--z-ink);             /* the dot carries Saffron; the word stays Ink */
  --new-tint: var(--z-saffron-tint-light);
  --on-new-tint: var(--z-ink);          /* 15.7 */

  /* Kitchen primary: the strongest inverse of the surface (never Saffron) */
  --inverse: var(--z-ink);
  --on-inverse: var(--z-cream);

  /* Interaction */
  --fill-secondary: rgb(21 23 28 / 0.06);  /* secondary buttons: Ink 6 % */
  --fill-selected: rgb(21 23 28 / 0.06);   /* selected sidebar row (with weight 600) */
  --fill-hover: var(--z-cream-200);        /* table row hover */
  --press-tint: rgb(21 23 28 / 0.06);      /* pressed = 6 % darker */
  --focus-w: 3px;
  --focus-ring: 0 0 0 2px var(--z-ink), 0 0 0 calc(2px + var(--focus-w)) var(--z-saffron);

  /* Materials (admin and website bars only; the kitchen is always solid) */
  --bar-bg: rgb(247 242 232 / 0.78);
  --bar-blur: blur(20px) saturate(160%);
  --scrim: rgb(21 23 28 / 0.40);

  /* Elevation: Ink-tinted shadows */
  --e1: 0 1px 2px rgb(21 23 28 / 0.06), 0 2px 8px rgb(21 23 28 / 0.04);
  --e2: 0 8px 24px rgb(21 23 28 / 0.10), 0 2px 6px rgb(21 23 28 / 0.06);
  --e3: 0 24px 64px rgb(21 23 28 / 0.18), 0 8px 16px rgb(21 23 28 / 0.08);

  /* Restaurant colour, resolved for this theme (inputs in §11) */
  --r-fill: var(--r-accent);
  --r-on-fill: var(--r-on-accent);
  --r-text: var(--r-accent-text);
}


/* --------------------------------------------------------------------------
   4. Colour roles — DARK. Ratios are against Ink unless noted.
      The two blocks below must stay identical (CSS cannot share a rule
      between an attribute scope and a media query).
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--z-ink);
  --bg-well: var(--z-ink-900);
  --surface: var(--z-dark-1);
  --surface-2: var(--z-dark-2);
  --surface-3: var(--z-dark-3);
  --paper: var(--z-cream);              /* Ink text on it: 16.1 */

  --text: var(--z-cream);               /* 16.1 (12.2 on surface-3) */
  --text-2: var(--z-ink-200);           /* 11.1 */
  --text-3: var(--z-ink-300);           /* 7.9 (6.0 on surface-3) */
  --text-off: var(--z-ink-500);         /* 2.8 */
  --text-3-dialog: var(--z-ink-250);    /* 6.5 on surface-3, 4.7 on fill-secondary there */

  --line: rgb(255 255 255 / 0.08);
  --line-strong: var(--z-line-strong-dark);

  --accent: var(--z-saffron);           /* 9.7: usable as text on dark */
  --on-accent: var(--z-ink);
  --accent-text: var(--z-saffron);
  --eyebrow: var(--z-saffron);

  --ready: var(--z-basil);              /* 3.6 against Ink: passes 3:1 for shapes */
  --on-ready: var(--z-white);
  --ready-text: var(--z-basil-text-dark);
  --ready-tint: var(--z-basil-tint-dark);
  --on-ready-tint: var(--z-basil-text-dark);    /* 6.1 */

  --late: var(--z-tomato);              /* 3.5 against Ink */
  --on-late: var(--z-white);
  --late-text: var(--z-tomato-text-dark);
  --late-tint: var(--z-tomato-tint-dark);
  --on-late-tint: var(--z-tomato-text-dark);    /* 6.3 */

  --new: var(--z-saffron);
  --on-new: var(--z-ink);
  --new-text: var(--z-saffron);
  --new-tint: var(--z-saffron-tint-dark);
  --on-new-tint: var(--z-saffron);              /* 7.0 */

  --inverse: var(--z-cream);
  --on-inverse: var(--z-ink);

  --fill-secondary: rgb(255 255 255 / 0.10);
  --fill-selected: rgb(255 255 255 / 0.08);
  --fill-hover: rgb(255 255 255 / 0.06);
  --press-tint: rgb(0 0 0 / 0.12);
  --focus-w: 3px;
  --focus-ring: 0 0 0 var(--focus-w) var(--z-saffron);

  --bar-bg: rgb(21 23 28 / 0.78);
  --bar-blur: blur(20px) saturate(160%);
  --scrim: rgb(14 15 18 / 0.60);

  /* Dark elevation: lighter surface + 1 px top highlight + hairline */
  --e1: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08);
  --e2: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.32);
  --e3: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 64px rgb(0 0 0 / 0.48);

  --r-fill: var(--r-accent-dark);
  --r-on-fill: var(--r-on-accent-dark);
  --r-text: var(--r-accent-text-dark);
}

@media (prefers-color-scheme: dark) {
  /* :where() keeps this at the same specificity as the blocks around it. */
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --bg: var(--z-ink);
    --bg-well: var(--z-ink-900);
    --surface: var(--z-dark-1);
    --surface-2: var(--z-dark-2);
    --surface-3: var(--z-dark-3);
    --paper: var(--z-cream);

    --text: var(--z-cream);
    --text-2: var(--z-ink-200);
    --text-3: var(--z-ink-300);
    --text-off: var(--z-ink-500);
    --text-3-dialog: var(--z-ink-250);

    --line: rgb(255 255 255 / 0.08);
    --line-strong: var(--z-line-strong-dark);

    --accent: var(--z-saffron);
    --on-accent: var(--z-ink);
    --accent-text: var(--z-saffron);
    --eyebrow: var(--z-saffron);

    --ready: var(--z-basil);
    --on-ready: var(--z-white);
    --ready-text: var(--z-basil-text-dark);
    --ready-tint: var(--z-basil-tint-dark);
    --on-ready-tint: var(--z-basil-text-dark);

    --late: var(--z-tomato);
    --on-late: var(--z-white);
    --late-text: var(--z-tomato-text-dark);
    --late-tint: var(--z-tomato-tint-dark);
    --on-late-tint: var(--z-tomato-text-dark);

    --new: var(--z-saffron);
    --on-new: var(--z-ink);
    --new-text: var(--z-saffron);
    --new-tint: var(--z-saffron-tint-dark);
    --on-new-tint: var(--z-saffron);

    --inverse: var(--z-cream);
    --on-inverse: var(--z-ink);

    --fill-secondary: rgb(255 255 255 / 0.10);
    --fill-selected: rgb(255 255 255 / 0.08);
    --fill-hover: rgb(255 255 255 / 0.06);
    --press-tint: rgb(0 0 0 / 0.12);
    --focus-w: 3px;
    --focus-ring: 0 0 0 var(--focus-w) var(--z-saffron);

    --bar-bg: rgb(21 23 28 / 0.78);
    --bar-blur: blur(20px) saturate(160%);
    --scrim: rgb(14 15 18 / 0.60);

    --e1: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08);
    --e2: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.32);
    --e3: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 64px rgb(0 0 0 / 0.48);

    --r-fill: var(--r-accent-dark);
    --r-on-fill: var(--r-on-accent-dark);
    --r-text: var(--r-accent-text-dark);
  }
}


/* --------------------------------------------------------------------------
   5. Paper — a light island for work items, in both themes.
      The element's own background is var(--paper) taken from its theme
      (Cream on dark, White on light); inside it, text and status roles read
      as on a light page.
   -------------------------------------------------------------------------- */
[data-surface="paper"] {
  color-scheme: light;

  --text: var(--z-ink);
  --text-2: var(--z-ink-700);
  --text-3: var(--z-ink-500);           /* 5.7 on Cream */
  --text-off: var(--z-ink-300);
  --line: rgb(21 23 28 / 0.12);
  --line-strong: var(--z-line-strong-light);

  --accent-text: var(--z-ink);
  --eyebrow: var(--z-ink-500);

  --ready-text: var(--z-basil-text-light);
  --ready-tint: var(--z-basil-tint-light);
  --on-ready-tint: var(--z-basil-text-light);
  --late-text: var(--z-tomato-text-light);
  --late-tint: var(--z-tomato-tint-light);
  --on-late-tint: var(--z-tomato-text-light);
  --new-text: var(--z-ink);
  --new-tint: var(--z-saffron-tint-light);
  --on-new-tint: var(--z-ink);

  --inverse: var(--z-ink);
  --on-inverse: var(--z-cream);

  --fill-secondary: rgb(21 23 28 / 0.06);
  --fill-selected: rgb(21 23 28 / 0.06);
  --fill-hover: rgb(21 23 28 / 0.04);
  --press-tint: rgb(21 23 28 / 0.06);
  --focus-ring: 0 0 0 2px var(--z-ink), 0 0 0 calc(2px + var(--focus-w)) var(--z-saffron);
}


/* --------------------------------------------------------------------------
   6. Increase Contrast (prefers-contrast: more), RESEARCH §3.1
      Secondary text becomes primary, lines become strong, tints become solid
      fills, focus rings grow to 4 px, translucency turns off.
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root,
  [data-theme],
  [data-surface="paper"] {
    --text-2: var(--text);
    --text-3: var(--text);
    --text-3-dialog: var(--text);
    --line: var(--line-strong);

    --ready-tint: var(--ready);
    --on-ready-tint: var(--on-ready);
    --late-tint: var(--late);
    --on-late-tint: var(--on-late);
    --new-tint: var(--new);
    --on-new-tint: var(--on-new);

    --focus-w: 4px;
    --bar-bg: var(--bg);
    --bar-blur: none;
  }
}

/* Reduce Transparency: solid bars everywhere. */
@media (prefers-reduced-transparency: reduce) {
  :root,
  [data-theme] {
    --bar-bg: var(--bg);
    --bar-blur: none;
  }
}


/* --------------------------------------------------------------------------
   7. Type — Outfit for words, JetBrains Mono for numbers.
      Each --t-* / --k-* token is a `font` shorthand: weight size/line family.
      `font` resets numeric features, so set font-variant-numeric after it.
   -------------------------------------------------------------------------- */
:root {
  --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Admin and website (px in comments at 100 % text) */
  --t-display: 700 clamp(2.5rem, 6vw, 4.5rem)/1.05 var(--font-sans);  /* 40–72, website hero */
  --t-title-1: 700 2.125rem/2.5rem var(--font-sans);    /* 34/40 page titles */
  --t-title-2: 700 1.75rem/2.125rem var(--font-sans);   /* 28/34 section titles */
  --t-title-3: 600 1.375rem/1.75rem var(--font-sans);   /* 22/28 group titles, empty states */
  --t-headline: 600 1.125rem/1.5rem var(--font-sans);   /* 18/24 card titles */
  --t-body: 400 1rem/1.5rem var(--font-sans);           /* 16/24 admin body */
  --t-body-web: 400 1.125rem/1.75rem var(--font-sans);  /* 18/28 website body */
  --t-callout: 400 0.9375rem/1.375rem var(--font-sans); /* 15/22 secondary text */
  --t-label: 500 0.875rem/1.25rem var(--font-sans);     /* 14/20 field labels */
  --t-button: 600 0.9375rem/1.25rem var(--font-sans);   /* 15/20 buttons */
  --t-footnote: 400 0.8125rem/1.125rem var(--font-sans);/* 13/18 hints, help */
  --t-eyebrow: 600 0.75rem/1rem var(--font-sans);       /* 12/16 UPPERCASE, +0.08em */
  --t-caption: 500 0.75rem/1rem var(--font-sans);       /* 12/16 smallest text anywhere */
  --t-num-kpi: 700 2rem/2.25rem var(--font-mono);       /* 32/36 dashboard figures */

  /* Kitchen: nothing below 18 px; sized for reading at 0.5–1.5 m */
  --k-timer-xl: 700 5rem/1 var(--font-mono);            /* 80 focused timer, big counts */
  --k-timer: 700 3.5rem/1 var(--font-mono);             /* 56 timers on cards */
  --k-id: 700 1.5rem/1.75rem var(--font-mono);          /* 24/28 ticket IDs, counts */
  --k-title: 700 2rem/2.375rem var(--font-sans);        /* 32/38 screen titles, step text */
  --k-headline: 600 1.75rem/2.125rem var(--font-sans);  /* 28/34 item names */
  --k-body: 500 1.5rem/2rem var(--font-sans);           /* 24/32 item lines, steps */
  --k-button: 600 1.375rem/1.75rem var(--font-sans);    /* 22/28 */
  --k-tab: 600 1.125rem/1.375rem var(--font-sans);      /* 18 tab labels */
  --k-meta: 500 1.125rem/1.5rem var(--font-sans);       /* 18 meta (the minimum) */

  /* Letter-spacing and measure */
  --ls-display: -0.02em;
  --ls-title: -0.01em;
  --ls-eyebrow: 0.08em;
  --measure: 68ch;
  --num-inline: 0.95em;  /* JetBrains Mono inside a sentence, so cap heights match */
}


/* --------------------------------------------------------------------------
   8. Space, sizes and targets — 4 px grid, in rem.
   -------------------------------------------------------------------------- */
:root {
  --s-4: 0.25rem;
  --s-8: 0.5rem;
  --s-12: 0.75rem;
  --s-16: 1rem;
  --s-20: 1.25rem;
  --s-24: 1.5rem;
  --s-32: 2rem;
  --s-40: 2.5rem;
  --s-48: 3rem;
  --s-64: 4rem;
  --s-80: 5rem;
  --s-96: 6rem;
  --s-128: 8rem;

  /* Admin: Apple's 44 pt rule */
  --a-margin: var(--s-24);              /* 32 from 1024 px, below */
  --a-card-pad: var(--s-20);
  --a-gap: var(--s-16);
  --a-target: 2.75rem;                  /* 44: buttons, fields, rows you tap */
  --a-row: 3rem;                        /* 48 table rows (40 compact) */
  --a-row-compact: 2.5rem;
  --a-chip: 1.75rem;                    /* 28 status chips */
  --a-sidebar: 16.5rem;                 /* 264 */
  --a-icon: 1.25rem;                    /* 20 */
  --a-logo-max: 2rem;                   /* restaurant logo height, max 32 */

  /* Kitchen: wet hands at arm's length */
  --k-margin: var(--s-24);
  --k-card-pad: var(--s-24);
  --k-gap: var(--s-16);                 /* never less between targets */
  --k-target-primary: 5rem;             /* 80: Done, Start, Ready, Stop, Next */
  --k-target: 4rem;                     /* 64: other controls */
  --k-target-min: 3.5rem;               /* 56: the floor */
  --k-topbar: 4.5rem;                   /* 72 */
  --k-strip: 3.5rem;                    /* 56 ticket status strip */
  --k-chip: 2.5rem;                     /* 40 status chips */
  --k-tab-w: 5.5rem;                    /* 88 × 64 tab targets */
  --k-tab-h: 4rem;
  --k-icon: 1.75rem;                    /* 28 */
  --k-card-min: 21.25rem;               /* 340 */
  --k-pin-key-w: 6rem;                  /* 96 × 80 PIN keys */
  --k-pin-key-h: 5rem;
  --k-logo-max: 2.5rem;                 /* restaurant logo height, max 40 */

  /* Website */
  --w-margin: var(--s-24);              /* 80 from 1024 px, below */
  --w-section: var(--s-96);             /* 96–128 between sections */
  --w-nav: 4rem;                        /* 64 */
  --w-cta: 3.25rem;                     /* 52 call-to-action */
}

@media (min-width: 1024px) {
  :root {
    --a-margin: var(--s-32);
    --w-margin: var(--s-80);
    --w-section: var(--s-128);
  }
}


/* --------------------------------------------------------------------------
   9. Radii — they nest: inner = outer − padding (22 − 8 = 14).
   -------------------------------------------------------------------------- */
:root {
  --radius-sm: 8px;     /* chips, tooltips, controls up to 40 px tall */
  --radius-md: 14px;    /* buttons and inputs 44–64 px, admin cards, tiles, toasts, tickets */
  --radius-lg: 22px;    /* rails, sheets, dialogs, popovers, website panels */
  --radius-full: 999px; /* dots and avatars only */
}


/* --------------------------------------------------------------------------
   10. Motion — purposeful, brief, never the only signal.
       No ease-in anywhere, and none of these curves overshoot.
   -------------------------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* enter, exit, responses */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* movement on screen, morphs */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* sheets and drawers (the iOS curve) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);      /* quick and base changes */

  --dur-instant: 100ms;   /* pressed state lands (scale 0.97 + 6 % darker) */
  --dur-press: 160ms;     /* press release */
  --dur-quick: 150ms;     /* hover, colour, chip changes (use `ease`) */
  --dur-tooltip: 125ms;
  --dur-dropdown: 200ms;
  --dur-base: 250ms;      /* expand, collapse, list insert, toast in, small modal */
  --dur-sheet: 450ms;     /* full sheets and page push with --ease-drawer */
  --dur-exit: 200ms;      /* anything leaving: shorter than its enter.
                             RESEARCH lists cubic-bezier(.4,0,1,1) here; that is
                             an ease-in, which MOTION-AND-POLISH bans, so exits
                             use --ease-out. */
  --dur-status: 300ms;    /* kitchen state change: crossfade, no movement */
  --dur-reveal: 400ms;    /* website hero: fade with a 12 px rise, plays once */
  --rise-reveal: 12px;

  --press-scale: 0.97;
  --pulse-count: 2;       /* LATE: two soft pulses, then steady */
}

@media (prefers-reduced-motion: reduce) {
  /* Fewer, gentler animations, never zero: everything becomes a 150 ms fade.
     Movement, scale, pulses and shimmer go; colour, words and sound stay. */
  :root {
    --dur-press: 150ms;
    --dur-dropdown: 150ms;
    --dur-base: 150ms;
    --dur-sheet: 150ms;
    --dur-exit: 150ms;
    --dur-status: 150ms;
    --dur-reveal: 150ms;
    --rise-reveal: 0px;
    --press-scale: 1;
    --pulse-count: 0;
  }
}


/* --------------------------------------------------------------------------
   11. Restaurant theming inputs (RESEARCH §3.7)
       The Zatila frame never changes. A restaurant brings a logo, a name and
       one accent, used only in: the kitchen logo tile and a 4 px rule on the
       Home header (≤ 5 % of the screen); the admin switcher avatar and the
       Overview header band (≤ 10 %). Never on status, buttons or the frame.
       Defaults are neutral until the app sets checked values, e.g.
       document.documentElement.style.setProperty('--r-accent', '#1F4E8C').
   -------------------------------------------------------------------------- */
:root {
  --r-accent: var(--z-ink);             /* fill on light screens */
  --r-on-accent: var(--z-white);        /* Ink or White, whichever is ≥ 4.5:1 */
  --r-accent-text: var(--z-ink);        /* ≥ 4.5:1 on Cream, Cream-200 and White */
  --r-accent-dark: var(--z-cream);      /* lightened fill for dark screens */
  --r-on-accent-dark: var(--z-ink);
  --r-accent-text-dark: var(--z-cream); /* ≥ 4.5:1 on Ink and surface-2 */
}