/* ── Snaptally layout tokens ────────────────────────────────────────────────
   THE source of truth for font size and spacing. Every page links this file
   directly. Renamed from type.css when spacing moved in — one file for the
   primitives every page must agree on.

   It is deliberately separate from appearance.css. appearance.css also owns
   colour, and three pages (sticky, extension, moved) run their own colour
   systems on purpose, so they cannot load it without losing the yellow note
   and the dark extension chrome. Size, unlike colour, is genuinely shared, so
   it lives here where all eight pages can take it.

   Ten steps, and only ten. If a design needs 14px, the answer is 13 or 15, not
   a new token. That is the point: --fs-14 does not exist, so writing it fails
   loudly instead of quietly adding an eleventh size the way 10.5, 11.5 and
   12.5 got added before this file existed.

   Roles, so the steps stay meaningful:
     32  splash numerals, hero glyphs
     26  sync codes
     22  step icons, large emoji
     18  standalone page headings
     15  brand name, modal titles, onboarding lead, glyph buttons
     13  BASE. body copy, inputs, buttons, section titles, timer clock
     12  secondary text, row meta, inline values
     11  fine print, hints, badges
     10  uppercase eyebrow labels
      9  micro tags

   Zoom is applied with body.style.zoom in appearance.js, which scales px
   values as-is, so these stay px rather than rem.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --fs-9:9px;
  --fs-10:10px;
  --fs-11:11px;
  --fs-12:12px;
  --fs-13:13px;
  --fs-15:15px;
  --fs-18:18px;
  --fs-22:22px;
  --fs-26:26px;
  --fs-32:32px;

  /* Fluid hero headline on the extension landing page, and nowhere else. It is
     a display size, not a UI size, which is why it sits outside the ten steps
     rather than pretending to be an eleventh one. */
  --fs-display:42px;

  /* Aliases for the sizes that must match ACROSS pages. Use these rather than
     the raw step when the whole point is that two pages agree. */
  --fs-base:var(--fs-13);
  --fs-brand:var(--fs-15);
  --fs-meta:var(--fs-12);
  --fs-label:var(--fs-10);
}

/* ── Form controls ──────────────────────────────────────────────────────────
   A <button> or <input> with no font-size does NOT inherit — every browser
   drops it to its own default, which is 13.333px in Chrome and different again
   in Safari. That is where a good half of the drift came from: the sizes were
   never written down, so nobody could see they were wrong.

   These are element selectors on purpose. Any class rule in any page beats
   them, so a control that genuinely wants another step just says so. */
button,input,select,textarea{font-size:var(--fs-13)}

/* ── Spacing ────────────────────────────────────────────────────────────────
   Semantic, not a numeric ladder. Type genuinely has ten sizes that mean ten
   different things; spacing has about five shapes that repeat everywhere, and
   naming them by shape stops the same argument recurring at every new card.

   These encode the rhythm the account page rebuild settled on and proved:
   12px vertical inside a cell, 14px horizontal, 12px between stacked cards.
   The unevenness David could see but not name was an 8px card gap fighting a
   14px column gutter across five different cell paddings (10, 11 and 12).

   If you are reaching for a sixth value, the shape is probably one of these
   five and the real question is which. */
:root{
  --sp-cell:12px 14px;   /* any cell inside a card: head, body, row */
  --sp-card:14px;        /* a card with no internal rows of its own */
  --sp-gap:12px;         /* between stacked cards */
  --sp-region:24px;      /* between major regions, e.g. rail and pane */
  --sp-page:24px 16px;   /* page gutter */
  --sp-tight:8px;        /* inline groups, button rows, chip gaps */
}