/* public/shared/h1-tokens.css — the Hospitality in 1 design tokens, ONE copy for
   every page. Lifted verbatim from public/pos/index.html (values byte-identical);
   the till and the floorplan stop carrying their own. Load this BEFORE the
   page's own <style> so page rules can still override a token's effect, and
   load /shared/h1-theme.js in <head> so data-theme is set before first paint.
   Holds: the light :root, the dark block, .numeric, the focus ring and the
   reduced-motion switch. Nothing else belongs here. */
  /* Hospitality in 1 design tokens (Brand Guidelines v1.0). The ONLY place a
     brand value is written; every rule below reads a token. Light is the
     default; html[data-theme="dark"] re-points the same names. The venue's
     own colours never reach the till: it is H1 product chrome, and the venue
     keeps its name and colours on the guest-facing output (see applyBrand). */
  :root {
    color-scheme: light;
    --surface: #F6F1E7;            /* cream: canvas, cards */
    --surface-raised: #FFFFFF;
    --surface-sunken: #E9E1D2;     /* inactive pills, the tables rail, inputs */
    --border-subtle: rgba(217,205,184,.5);
    --border-default: #CFC2A9;     /* a step darker than linen so a tile edge reads on cream */
    --text-primary: #2B2A28;       /* charcoal */
    --text-secondary: #676058;     /* stone, a step darker than the guideline #6E675D: 4.8:1 on the retuned sunken, 5.5:1 on cream (the guideline value is 4.3:1 on sunken) */
    --accent: #A67A3E;             /* bronze: the ONE primary action per screen; a fill, never text on cream (3.4:1) */
    --accent-strong: #866332;      /* filled-button background only: bronze hue, 4.9:1 under cream (bronze itself is 3.4:1) */
    --on-accent: #F6F1E7;
    --accent-subtle: rgba(166,122,62,.12);
    --success: #3E5C4B;            /* sage: money-positive signals only (6.6:1 on cream) */
    --danger: #A4392E;             /* 5.8:1 on cream */
    --danger-subtle: rgba(164,57,46,.10);
    --on-danger: var(--surface);   /* cream on light danger 5.8:1, charcoal on dark danger 5.6:1 */
    --warning: #80591F;            /* amber, for attention that is not an error: 5.5:1 on cream, 6.2:1 on white, 4.8:1 on sunken */
    --warning-subtle: rgba(128,89,31,.14);
    --success-subtle: rgba(62,92,75,.12);
    /* Words ON a status tint (17 Oct 2026, the staff app's dark-mode review):
       a chip, pill, alert or error laid on its own -subtle tint over
       --surface-raised. Light: the status colour itself. Dark (below): a
       step lighter, where the status colours fall under 4.5:1 there. Grey
       words on the --accent-subtle "today" band take --text-secondary-on-tint. */
    --danger-ink: var(--danger);
    --success-ink: var(--success);
    --accent-ink: var(--accent-strong);
    --warning-ink: var(--warning);
    --text-secondary-on-tint: var(--text-secondary);
    /* FOOD SAFETY CATEGORY STRIPES (7 Oct 2026): the eleven named colours a
       category tile may carry (public/shared/menuColours.js). Stripes only,
       never text. Bronze stays the accent and is not one of them: orange is a
       true orange; gold is one step darker and warmer than yellow; cream is a
       light band that still reads on the cream canvas. */
    --cat-red: #C0392B;
    --cat-blue: #2F6DB5;
    --cat-green: #3F8F3F;
    --cat-yellow: #E3B505;
    --cat-cream: #E0CB96;
    --cat-purple: #7A4E9E;
    --cat-gold: #B8860B;
    --cat-orange: #E8761B;
    --cat-pink: #D6457F;
    --cat-teal: #1F8A8A;
    --cat-brown: #6F4E37;
    /* The item tiles' stripe tints (till restyle F, 9 Oct 2026): the same
       hue, 35% less saturated and 8–16 points lighter — a tint, not a
       highlight. The category tiles keep the colours above. */
    --cat-red-tint: #C07068;
    --cat-blue-tint: #668DBB;
    --cat-green-tint: #67A467;
    --cat-yellow-tint: #DAC160;
    --cat-cream-tint: #E7DFCC;
    --cat-purple-tint: #977DAC;
    --cat-gold-tint: #BA9332;
    --cat-orange-tint: #D29A6E;
    --cat-pink-tint: #CF8AA5;
    --cat-teal-tint: #44A2A2;
    --cat-brown-tint: #8B6D59;
    /* SIBLING STEPS (10 Oct 2026): sub-categories under one menu that share
       a family take these in turn (sortOrder): the family tint, then hue
       −12° / −8 points, +12° / +8, −24° / −4, +24° / +4, −6° / −14, so no
       two siblings share a stripe. Still light and muted. */
    --cat-red-tint-1: #B44B57;
    --cat-red-tint-2: #CC9A85;
    --cat-red-tint-3: #BA5A77;
    --cat-red-tint-4: #C69D76;
    --cat-red-tint-5: #9E4243;
    --cat-blue-tint-1: #4C8BAC;
    --cat-blue-tint-2: #8294C8;
    --cat-blue-tint-3: #58A8B5;
    --cat-blue-tint-4: #7479C1;
    --cat-blue-tint-5: #437297;
    --cat-green-tint-1: #608D55;
    --cat-green-tint-2: #81B38B;
    --cat-green-tint-3: #759A5C;
    --cat-green-tint-4: #74AC8A;
    --cat-green-tint-5: #4E7A49;
    --cat-yellow-tint-1: #D2973F;
    --cat-yellow-tint-2: #E2E181;
    --cat-yellow-tint-3: #D6854F;
    --cat-yellow-tint-4: #C9DE71;
    --cat-yellow-tint-5: #C5972E;
    --cat-cream-tint-1: #DAC5B0;
    --cat-cream-tint-2: #F4F3E8;
    --cat-cream-tint-3: #E0C9BE;
    --cat-cream-tint-4: #EBEEDA;
    --cat-cream-tint-5: #D0BB9B;
    --cat-purple-tint-1: #78649C;
    --cat-purple-tint-2: #B396BC;
    --cat-purple-tint-3: #7871A4;
    --cat-purple-tint-4: #B289B4;
    --cat-purple-tint-5: #6E588A;
    --cat-gold-tint-1: #9A6329;
    --cat-gold-tint-2: #CEC247;
    --cat-gold-tint-3: #AA552E;
    --cat-gold-tint-4: #B9C937;
    --cat-gold-tint-5: #825D23;
    --cat-orange-tint-1: #C86C4F;
    --cat-orange-tint-2: #DCBF8D;
    --cat-orange-tint-3: #CD635E;
    --cat-orange-tint-4: #D7C97E;
    --cat-orange-tint-5: #BE673B;
    --cat-pink-tint-1: #C36DA0;
    --cat-pink-tint-2: #DBA7B1;
    --cat-pink-tint-3: #C97CB9;
    --cat-pink-tint-4: #D59998;
    --cat-pink-tint-5: #BA5788;
    --cat-teal-tint-1: #388576;
    --cat-teal-tint-2: #57A5B8;
    --cat-teal-tint-3: #3E9471;
    --cat-teal-tint-4: #4A87B0;
    --cat-teal-tint-5: #2F7069;
    --cat-brown-tint-1: #725149;
    --cat-brown-tint-2: #A18C6C;
    --cat-brown-tint-3: #7F5151;
    --cat-brown-tint-4: #978D61;
    --cat-brown-tint-5: #5F473D;
    --scrim: rgba(43,42,40,.45);
    --shadow: 0 1px 2px rgba(43,42,40,.04), 0 8px 24px rgba(43,42,40,.06);
    --shadow-tile: 0 1px 3px rgba(43,42,40,.10);   /* item and section tiles: lifts them off cream */
    --focus: var(--accent);
  }
  html[data-theme="dark"] {
    color-scheme: dark;
    --surface: #26251F;            /* a touch below charcoal so raised tiles read as a step up */
    --surface-raised: #3D3A34;
    --surface-sunken: #1E1D1A;
    --border-subtle: #4A463F;
    --border-default: #5A554C;
    --text-primary: #F6F1E7;
    --text-secondary: #ADA598;     /* a step lighter than before: 4.7:1 on the retuned raised, 6.3:1 on surface (#A39B8E is 4.1:1 on raised) */
    --accent: #C9985A;             /* 5.6:1 on charcoal, 4.9:1 on raised; raw bronze is 3.7:1 and fails */
    --accent-strong: #CFA063;      /* one step above the dark accent: 4.8:1 on raised (the bar's active label), 6.5:1 on surface; charcoal on it 6.1:1 */
    --on-accent: #2B2A28;
    --accent-subtle: rgba(201,152,90,.16);
    --success: #86AC94;            /* 5.7:1 on charcoal; raw sage is 1.9:1 */
    --danger: #E48A78;             /* 5.6:1 on charcoal */
    --danger-subtle: rgba(228,138,120,.14);
    --warning: #E0B15A;            /* 7.8:1 on surface, 5.7:1 on raised */
    --warning-subtle: rgba(224,177,90,.16);
    --success-subtle: rgba(134,172,148,.16);
    /* Words on a status tint over --surface-raised: each 4.7:1 (the status
       colours themselves are 3.5 to 4.2:1 there). */
    --danger-ink: #ECAB9E;
    --success-ink: #AAC5B4;
    --accent-ink: #DBB88A;
    --warning-ink: #E5BD74;
    --text-secondary-on-tint: #C3BDB4;  /* grey words on --accent-subtle: 4.7:1 (#ADA598 is 3.6:1) */
    /* The same eleven stripes, lifted to read on charcoal. */
    --cat-red: #E57368;
    --cat-blue: #6FA3E8;
    --cat-green: #74BF74;
    --cat-yellow: #F0C94A;
    --cat-cream: #E0CB96;
    --cat-purple: #B08AD6;
    --cat-gold: #D4A531;
    --cat-orange: #F5923A;
    --cat-pink: #EE86B0;
    --cat-teal: #5FBFBF;
    --cat-brown: #B08866;
    /* The dark set is already a tint: the stripes use it as it is. */
    --cat-red-tint: #E57368;
    --cat-blue-tint: #6FA3E8;
    --cat-green-tint: #74BF74;
    --cat-yellow-tint: #F0C94A;
    --cat-cream-tint: #E0CB96;
    --cat-purple-tint: #B08AD6;
    --cat-gold-tint: #D4A531;
    --cat-orange-tint: #F5923A;
    --cat-pink-tint: #EE86B0;
    --cat-teal-tint: #5FBFBF;
    --cat-brown-tint: #B08866;
    /* The sibling steps, off the dark tints. */
    --cat-red-tint-1: #DF4556;
    --cat-red-tint-2: #EBA78B;
    --cat-red-tint-3: #E25782;
    --cat-red-tint-4: #E8AF79;
    --cat-red-tint-5: #DB2B2D;
    --cat-blue-tint-1: #4CABE2;
    --cat-blue-tint-2: #92A7EE;
    --cat-blue-tint-3: #5DCEE5;
    --cat-blue-tint-4: #8184EB;
    --cat-blue-tint-5: #318DDE;
    --cat-green-tint-1: #6AB258;
    --cat-green-tint-2: #90CC9C;
    --cat-green-tint-3: #87B966;
    --cat-green-tint-4: #82C59D;
    --cat-green-tint-5: #53A14A;
    --cat-yellow-tint-1: #ED9624;
    --cat-yellow-tint-2: #F3EF70;
    --cat-yellow-tint-3: #EE7A37;
    --cat-yellow-tint-4: #D9F25D;
    --cat-yellow-tint-5: #E09B13;
    --cat-cream-tint-1: #D7A877;
    --cat-cream-tint-2: #E9E5B6;
    --cat-cream-tint-3: #DBA186;
    --cat-cream-tint-4: #DDE5A6;
    --cat-cream-tint-5: #D0A45F;
    --cat-purple-tint-1: #886CCB;
    --cat-purple-tint-2: #D0A8E1;
    --cat-purple-tint-3: #837BD1;
    --cat-purple-tint-4: #D599DB;
    --cat-purple-tint-5: #8155C3;
    --cat-gold-tint-1: #B67026;
    --cat-gold-tint-2: #DBCF53;
    --cat-gold-tint-3: #C75B2A;
    --cat-gold-tint-4: #C7D842;
    --cat-gold-tint-5: #9D6D21;
    --cat-orange-tint-1: #F35013;
    --cat-orange-tint-2: #F7C661;
    --cat-orange-tint-3: #F43527;
    --cat-orange-tint-4: #F6E04D;
    --cat-orange-tint-5: #DC590B;
    --cat-pink-tint-1: #E962B4;
    --cat-pink-tint-2: #F3AAB9;
    --cat-pink-tint-3: #EB74D4;
    --cat-pink-tint-4: #F19898;
    --cat-pink-tint-5: #E54797;
    --cat-teal-tint-1: #46AF9A;
    --cat-teal-tint-2: #7CBBCB;
    --cat-teal-tint-3: #50B98F;
    --cat-teal-tint-4: #6EA2C5;
    --cat-teal-tint-5: #3D9990;
    --cat-brown-tint-1: #9C6451;
    --cat-brown-tint-2: #BEA981;
    --cat-brown-tint-3: #A95D59;
    --cat-brown-tint-4: #B7AD73;
    --cat-brown-tint-5: #885E46;
    --scrim: rgba(0,0,0,.6);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-tile: 0 1px 3px rgba(0,0,0,.35);
  }
  /* MONEY NEVER JITTERS. One utility, applied to every figure: prices,
     quantities, totals, table numbers, covers, times. Even-width digits so a
     column adds up by eye, a slashed zero so 0 never reads as O. It inherits,
     so a keypad or a totals block takes it once. */
  .numeric { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1; }
  /* FOCUS IS VISIBLE EVERYWHERE: keyboards and scanners drive this till. The
     ring sits outside the control (offset) so it reads against the surface
     around it, never against the control's own fill. Accent on cream is
     3.4:1, on charcoal 5.6:1, both above the 3:1 a focus indicator needs. */
  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }