/* shared-styles.css — the ONLY place the site's font and brand colors are defined.
 *
 * WHY THIS EXISTS (2026-08-20). Every page in this project used to carry its own private copy of
 * its styling, inherited from the old Composer, which exported each page as a self-contained file.
 * Private copies drift: before this file existed, eight pages rendered in Arial and six in the
 * system stack, and nobody had decided that — it just happened. The same duplication in the
 * JavaScript had already rotted silently (social.html lost its mailto/tel handling; see
 * Daily Progress 2026-07-15), which is why the JS was pulled into shared-helpers.js and
 * shared-nav.js. CSS was never part of that cleanup. This file is that missing piece.
 *
 * SCOPE — deliberately small. Only what must never differ between pages lives here:
 * the typeface and the brand color tokens. Every page keeps its own layout rules exactly where
 * they are; the vet cards stay in vet.html, the dashboard stays in admin/index.html. Resist the
 * urge to move page-specific rules in here — a bad rule in this file breaks all 17 pages at once.
 *
 * LOADING — link it in <head> BEFORE the page's own <style> block, so a page can still override
 * a token deliberately. Cache-bust with ?v=N on every edit, same rule as app.js/shared-helpers.js.
 *
 * FONT — Roboto, self-hosted. Never link to fonts.googleapis.com or fonts.gstatic.com at runtime:
 * that would tell Google the IP address of every person who scans one of Paavo's tags. The font
 * is Apache License 2.0, so shipping the file is permitted. Two subsets are stored, not the full
 * nine Google serves: `latin` (43 KB) covers English; `latin-ext` (29 KB) covers accented European
 * characters, which matters because owner and dog names are free text (Tengström needs its ö).
 * Cyrillic, Greek, Vietnamese, math and symbol subsets are omitted — add them only if a real
 * customer needs one. Both files are the VARIABLE font: one file serves every weight 100-900.
 * Source: https://fonts.googleapis.com/css2?family=Roboto:wght@100..900 (v51), downloaded once.
 */

/* ── Roboto, variable weight 100-900, self-hosted ─────────────────────────────────────────── */
/* latin-ext first: the browser picks whichever subset covers the character it needs. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
                 U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
                 U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* ── Tokens ───────────────────────────────────────────────────────────────────────────────── */
:root {
  /* Roboto first; the system stack is a fallback for the moments before the file lands, or if it
   * fails entirely. Never add a Google-hosted family to this list. */
  --font-sans: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Monospace is deliberate in this codebase — tag codes, order numbers, IDs — and must stay
   * monospace. Pages that want it should use this token rather than inventing another stack. */
  --font-mono: 'SF Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace;
}

/* The site-wide default. Anything a page sets in its own <style> still wins, which is intended:
 * this is the floor, not a mandate. */
/* html as well as body: the <html> element does not inherit from body, so leaving it out
 * left it on the browser's default serif. Harmless for normal content, which body governs,
 * but it means the document's own font is Times New Roman — and anything that escapes body's
 * inheritance falls back to a serif nobody chose. Set both. */
html, body {
  font-family: var(--font-sans);
}

/* FORM CONTROLS — buttons, inputs, selects and textareas do NOT inherit font-family from
 * their parent; every browser substitutes its own default. That is why, before 2026-08-21,
 * every <button> on this site rendered in Arial and the records-upload description box in
 * monospace, while the text beside them was Roboto. The body rule above never reached them.
 * This is the single place that can fix it for all 17 pages. Do not remove.
 * font: inherit is deliberately NOT used — it would also wipe each control's own size and
 * weight, which the pages set individually. */
button, input, select, textarea, optgroup {
  font-family: inherit;
}

/* FIELD TEXT SIZE — iOS Safari magnifies the WHOLE page whenever a focused field's text is
 * under 16px, and it never zooms back out. Measured on a real iPhone 2026-08-22: the upload
 * page's fields came out at 15.99px — under the line by one hundredth of a pixel — and the
 * page stayed magnified for the rest of the session.
 * 16px is the floor for anything you can type into. This sets the DEFAULT for every control
 * on every page; a page may still set something LARGER, but nothing should set less.
 * Buttons are excluded on purpose — they take no typed text and pages size them themselves. */
input, select, textarea {
  font-size: 16px;
}