/* ============================================================================
   event.clinic tokens, THE LOCAL LAYER. Hand written, loads AFTER
   tokens.generated.css.
   ----------------------------------------------------------------------------
   Owner decision 2026-07-29: the accepted visual plan
   `design/foundation-v12.html` is a BUILD INPUT, and every custom property now
   comes from it through `gen-design-system.mjs`. THIS FILE IS FOR THE THINGS
   THE FOUNDATION DOES NOT HAVE, and each one needs a reason written next to it.

   WHAT IS NOT HERE, AND MUST NEVER COME BACK. Not one custom property. The
   app's `:root` was measured against the foundation on 2026-07-29 and it is a
   strict SUBSET: zero app-only tokens, and the only two differing values were
   `--shadow-sm` and `--shadow-md`, which had drifted by a few pixels of blur
   during the Run 0 hand port. The foundation's values now win, which is the
   whole point of generating. Adding a token here would recreate the drift this
   split exists to remove.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   THE ONE DECLARATION THE FOUNDATION DOES NOT CARRY, and it is load bearing.

   `color-scheme` is NOT cosmetic. It is what makes the BROWSER'S OWN chrome
   follow the theme: the native dropdown a `select` opens, scrollbars, and form
   control defaults. Without it the footer's select opens a WHITE menu on a dark
   panel, which is the one piece of the UI that CSS variables cannot reach.

   It is absent from the foundation because a one-page design reference never
   opens a native dropdown. The app does, on every screen with a select.
   ---------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   BASE RESET AND BODY.

   Kept local rather than generated because the foundation carries these inside
   a `<style>` block that also styles its own demo chrome, and lifting them
   wholesale would drag that in. They are small, stable and identical to the
   foundation's own values.

   `* { margin: 0; padding: 0 }` IS WHY `.stack` EXISTS. Nothing in this app has
   vertical rhythm until a class gives it some, which is deliberate: it makes
   spacing an explicit decision rather than a browser default nobody chose.
   ---------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  /* E7 (UX study 2026-10-02): body 14 px. Was --text-md, 13.5 px. */
  font-size: var(--text-body);
  color: var(--ink-900);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-100); }