/* ============================================================================
   DAILY MENU v2 — STRUCTURAL TOKENS
   Spacing, radii, type scale, sizing, motion — everything that must NOT vary
   by skin (docs/DESIGN.md §1/§9, "skin system" contract). Never hardcode a
   radius/space/size value in a component — reference a token.

   Color lives in ./skins.css (SKIN tokens: surfaces, ink, person A/B hues,
   now-ember, semantic accents, elevation-shadow tint). A skin = a named
   `[data-skin="..."]` block providing every SKIN token for both the dark and
   the (nested) light theme variant. See skins.css's header comment for the
   full contract and "how to add a skin".
   ========================================================================== */
:root {
  /* --- type --- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Helvetica, Arial, system-ui, sans-serif;
  --t-clock:30px; --t-date:24px; --t-h1:20px; --t-chip:16px; --t-hour:15px;
  --t-body:15px; --t-label:13px; --t-badge:12.5px; --t-eyebrow:11px;

  /* --- space / radius / sizing --- */
  --sp-1:4px; --sp-2:7px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:28px; --sp-7:40px;
  --r-chip:999px; --r-card:12px; --r-sheet:18px; --r-input:8px;
  --tap-min:44px; --row-min-h:58px; --chip-check-w:46px; --chip-check-h:26px;

  /* --- motion --- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-fast:.12s; --dur:.18s; --dur-slow:.28s;
}

* { box-sizing: border-box; }
/* CX M2: several components set their own `display` (flex/inline-flex) which
   otherwise beats the UA's `[hidden] { display:none }` — pinnote/seg/pswitch
   all stayed visibly on-screen with `hidden` set. This must win over any
   component's own display rule regardless of load order. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--now); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }