/* My Time Snack — shared design layer.
   Loaded LAST in every page's <head>, so its :root tokens override each page's inline :root
   and rebrand/re-elevate the whole app from one place. Retro-diner brand + Square-grade polish. */

/* ---- Brand + design tokens (override page defaults) ---- */
:root{
  --red:#F0232E;         /* vivid scarlet (real brand) */
  --red-d:#C4141B;
  --cream:#FBF3DA;       /* warm cream */
  --ink:#1A1614;         /* near-black */
  --amber:#E9A32B;
  --green:#1E7E3E;
  /* softer, layered elevation (replaces the old uniform heavy 0 3px 10px/.25 shadow) */
  --shadow:0 2px 8px rgba(26,22,20,.10);
  /* Negative spread stops a shadow haloing sideways. Content uses BORDERS; these are for things that
     genuinely float and can be dismissed. */
  --e-pop:0 4px 6px -2px rgba(26,22,20,.20);
  --e-modal:0 12px 20px -8px rgba(26,22,20,.24);
  --press-inset:0 2px 1px 0 rgba(26,22,20,.20) inset;
  --e-1:0 1px 2px rgba(26,22,20,.08);
  --e-2:0 2px 8px rgba(26,22,20,.12);
  --e-3:0 12px 30px rgba(26,22,20,.16);
  /* One scrim for "a dialog is over the content". Light-theme dialogs used five different backdrops
     (pure black .5/.55, ink .72) for the identical role; this is the warm ink the dominant surfaces
     already used. The full-screen success takeover and the dark KDS keep their own heavier scrims. */
  --scrim:rgba(26,22,20,.55);
  --line:1px solid rgba(26,22,20,.10);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px;

  /* ---- SEMANTIC SURFACES ----
     The palette used to be brand colours only, so there was nowhere to put content except on red —
     which is why every screen read as a wall of red. These are the neutral roles content sits on.
     Warm neutrals derived from the cream, never a cold grey: the brand stays present even here. */
  /* NOTE: shared.css loads LAST on every page, so ANY token declared here overrides a page's own
     :root. That is deliberate for brand tokens (--red/--cream/--ink stay in sync from one place) and
     a TRAP for everything else. `--bg` was briefly declared here and silently turned the dark kitchen
     display cream, because kds.html declares its own `--bg`. New tokens get an `--app-` prefix so a
     page can always keep a local name. */
  --app-bg:#F3ECDC;        /* app background behind content */
  --surface:#FDF8EC;       /* cards, tiles, ticket, panels */
  --surface-2:#F6EEDC;     /* inset: table stripes, wells */
  --surface-3:#EFE4CC;     /* pressed / selected surface */

  /* ---- TEXT ---- */
  --fg:#1A1614;            /* = --ink */
  --fg-muted:#6B5D4E;      /* secondary text, labels */
  --fg-subtle:#75674F;     /* placeholders, disabled — 4.68:1 on --app-bg (was #9A8A78 at 2.84:1, failed AA) */
  --fg-on-red:#FFF6E2;     /* text on red chrome */

  /* ---- LINES ---- Prefer a hairline over a shadow on content; shadows are for floating things. */
  --border:rgba(26,22,20,.12);
  --border-strong:rgba(26,22,20,.22);
  --ring:#1B6FD6;

  /* ---- STATUS, kept SEPARATE from brand red ----
     On a red-chromed app, using brand red to also mean "error" makes errors invisible. */
  --danger:#C4141B;  --danger-bg:#FDE7E8;
  /* ACTION red is the DARK red, not brand red. Measured: white on --red is 4.21:1 (fails AA);
     white on --red-d is 6.06:1 (passes). Brand --red is for the logo, chrome bands and >=24px
     display type only — never a button fill, never body-size text on a light surface (3.97:1). */
  --action:#C4141B;  --action-hover:#A81016;  --on-action:#FFFFFF;
  --warn:#E9A32B;    --warn-bg:#FDF1DA;
  --ok:#1E7E3E;      --ok-bg:#E4F2E8;
  --info:#1B6FD6;    --info-bg:#E4EDFA;

  /* ---- TYPE SCALE ----
     Tracking is size-specific (Apple): tighten as text grows, loosen slightly as it shrinks.
     One fixed letter-spacing is always wrong somewhere. */
  --t-display:34px; --t-h1:24px; --t-h2:18px; --t-body:16px; --t-sm:14px; --t-xs:12px; --t-label:12px;
  --tr-display:-.02em; --tr-h1:-.01em; --tr-body:0; --tr-xs:.02em; --tr-label:.08em;

  /* ---- MOTION ----
     The built-in CSS easings are too weak to feel intentional. Never ease-in: it delays the first
     movement, which is exactly the moment the user is watching. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-press:120ms; --dur-fast:160ms; --dur-mid:220ms; --dur-slow:300ms;

  /* ---- TOUCH TARGETS ---- 44 is the web minimum; the POS and KDS get 48 (greasy fingers). */
  --tap:44px; --tap-pos:48px;
}

/* ---- Money and counts line up in columns everywhere ---- */
.tnum,.money,td,th,.lp,.q,.stk,.priceIn,.cnt,.pr,.tot,output{ font-variant-numeric:tabular-nums; }

/* ---- Type ---- */
/* ---- MONEY ----
   Alfa Slab One has NO tabular-numeral feature. Measured in-browser at 40px: "111111" is 50.4px
   narrower than "000000", and font-variant-numeric does nothing to close it. A running total in that
   face physically JUMPS as digits change, which reads as broken. Barlow Condensed does support it
   (42px apart normally -> exactly 0px with tabular-nums), so Barlow 800 is the money face for any
   number that CHANGES. Alfa Slab One stays for the wordmark and for numbers rendered once and never
   mutated (the order number on a confirmation screen). */
.money, .tnum, #total, #ctot, #bankTotal, .kpi .v, .clock{
  font-family:'Barlow Condensed','Segoe UI',sans-serif; font-weight:800;
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.01em;
}
/* Tracking is size-specific: the block above sets h1 tracking (-.01em), but the running TOTAL and the
   header CLOCK render at display size, where letters read too far apart. Give the display-tier money
   the display tracking — the same reason the type scale carries a separate --tr-display. */
#total, .clock{ letter-spacing:var(--tr-display); }
/* Static-only: rendered once, never animated, so proportional digits are safe and on-brand. */
#successBox .big, #successBox .num, #confBox .num{
  font-family:'Alfa Slab One', Georgia, 'Segoe UI', serif;
}
/* Barlow Condensed is the signage voice: tabs, column heads, section titles — the same component
   must not speak in two typefaces across screens (admin tabs vs POS tabs, headings vs headings). */
#tabs .tab, .tabs .tab, #ticket h2, .col h2, .catHead .ctitle, .panel h2, #drawerBox h2, h1, footer{
  font-family:'Barlow Condensed','Segoe UI',sans-serif; letter-spacing:.06em; text-transform:uppercase; font-weight:800;
}
/* Line up digits everywhere money/counts appear */
.tnum, #total, #ctot, #bankTotal, .lp, .kpi .v, .priceIn, .stk, .ttime, .clock, td, .q{ font-variant-numeric:tabular-nums; }

/* ---- Brand logo: use the REAL image (brand/logo.png) when present; otherwise a clean CSS fallback.
   The <img> reveals itself on successful load and hides the fallback — so dropping brand/logo.png
   into the repo makes your actual logo appear on every screen with no code change. ---- */
.brand{ display:inline-flex; align-items:center; gap:.15em; text-decoration:none; font-size:30px; line-height:1;
  min-height:var(--tap); }   /* it is a link, so it has to be reachable like one */
.brand .logo{ display:none; height:1.8em; width:auto; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.brand.haslogo .logo{ display:block; }
.brand.haslogo .lockup{ display:none; }
.brand .lockup{ display:inline-flex; align-items:flex-start; gap:.1em; line-height:1; white-space:nowrap; padding-bottom:.1em; }
.brand .wm{ font-family:'Pacifico','Brush Script MT',cursive; font-size:1em; line-height:1.08; color:var(--cream);
  text-shadow:2px 2px 0 var(--ink), 3px 3px 0 rgba(0,0,0,.18); letter-spacing:.5px; }
.brand .star{ font-size:.5em; color:var(--cream); align-self:flex-start; margin-top:.15em; }
.brand .snack{ font-family:'Barlow Condensed',sans-serif; font-size:.3em; text-transform:lowercase;
  letter-spacing:.34em; font-weight:600; color:var(--cream); opacity:.95; align-self:flex-start; margin-top:.4em; }
.brand.on-cream .wm{ color:var(--red); text-shadow:2px 2px 0 rgba(26,22,20,.14); }
.brand.on-cream .star{ color:var(--red); }
.brand.on-cream .snack{ color:var(--ink); }

/* ---- Mascot: shown only when the real brand/mascot.png exists (onerror removes it — no stand-in). ---- */
img.mascot{ height:64px; width:auto; display:block; }

/* ---- Faint food-doodle texture (masked so it tints to cream, and sits behind content). ---- */
.doodle{ position:relative; }
.doodle > *{ position:relative; z-index:1; }
.doodle::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-color:var(--cream); opacity:.10;
  -webkit-mask:url(/brand/pattern.svg) 0 0 / 300px; mask:url(/brand/pattern.svg) 0 0 / 300px; }
.doodle.on-cream::before{ background-color:var(--ink); opacity:.06; }

/* ---- Kitchen-note field (used by the add-ons sheet on POS + order page) ---- */
#sheetNote{ width:100%; min-height:64px; border:2px solid #d9c9a8; border-radius:var(--r-md);
  padding:10px 12px; font:inherit; font-size:16px; background:#fff; color:var(--ink); }
.charCount{ font-size:12px; color:#6b5d4e; text-align:right; margin-top:2px; }

/* ---- Tap feedback (acknowledge every press) ---- */
button, .tab, .card, .item, .breadBtn, .payT, .bump, .chip.add, .mini, .saveBtn, .name, .act{
  transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out),
             filter var(--dur-press) var(--ease-out), background var(--dur-press) var(--ease-out);
}
/* Press feedback belongs to things you actually press. (.card/.item are containers — including the
   clock-in card, which used to shrink on every PIN keypress.) */
button:active, .breadBtn:active, .payT:active, .tab:active, .bump:active,
.mini:active, .name:active, .act:active{ transform:scale(.97); filter:brightness(.97); }

/* ---- Always-visible focus ring ---- */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible{
  outline:3px solid #1b6fd6; outline-offset:2px;
}
/* On the red ground a blue ring is nearly invisible (~1.2:1) — use cream for anything sitting on red.
   Admin's header nav pills (POS / KDS / Web Order) live on the same red band and were falling through
   to the blue ring, which no one could see against the chrome. */
.catchip:focus-visible, .catHead:focus-visible, .brand:focus-visible, header button:focus-visible,
header nav a:focus-visible, #tabs .tab:focus-visible, #cartFab:focus-visible{
  outline:3px solid var(--cream); outline-offset:2px;
}

/* ---- Contrast + status chips ---- */
.chip.add{ background:var(--amber); color:var(--ink); }
.chip.no{ background:#fde2e3; color:var(--red-d); font-weight:800; }

/* ---- Desktop hover feedback (mouse only; no effect on touch tablets) ---- */
@media (hover:hover) and (pointer:fine){
  #fire:hover, .addBtn:hover, .payT:hover, .bump:hover, .saveBtn:hover, .mini:hover,
  .tab:hover, .act:hover, .name:hover, .copyBtn:hover, .breadBtn:hover{ filter:brightness(1.05); }
  .card:hover, .item:hover{ box-shadow:var(--e-2); }
}

/* ---- Accessibility preferences ----
   Reduced motion means gentler, not none: colour/opacity changes that aid comprehension stay. */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}
/* Frosted surfaces become solid rather than merely less blurred — legibility first.
   NOTE: no screen uses backdrop-filter today, so this is a FORWARD guard, not something currently
   doing work. test/t_css.js fails the build if a page adds backdrop-filter outside `.glass`, so the
   guard cannot silently fall out of date. */
@media (prefers-reduced-transparency: reduce){
  .glass{ backdrop-filter:none !important; background:var(--surface) !important; }
}
/* High contrast: solid grounds and a defined border on every container. */
@media (prefers-contrast: more){
  :root{ --border:rgba(26,22,20,.38); --border-strong:rgba(26,22,20,.55); --fg-muted:#4A3E33; --fg-subtle:#5C5044; }
}