/* Amos, Clean-Sheet 2026: the foundation - the face, the non-colour
   tokens (type, space, radius, targets, motion) and the base rules.
   Colour lives in tokens.css (generated; load it first); the components
   are in components.css. The customer pages load this and not the
   components, whose class names (.row, .btn, .empty) they already use
   for their own things. See docs/cleansheet-2026/system.md. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Type: one face, four roles. Sizes are for a phone held at arm's length.
     Every size is in rem, so every size is the phone's text size
     (round 4, A). Reading text grows without limit; the two display
     roles grow until the phone's width can hold no more (the vw cap) -
     a 60px name would break across three lines to say one thing. */
  --font: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --t-display: 700 min(2.5rem, 12vw)/1.05 var(--font);    /* 40: the next thing, the big number */
  --t-title:   650 min(1.375rem, 7.5vw)/1.2 var(--font);  /* 22: screen and panel titles */
  --t-body:    450 1.0625rem/1.4 var(--font); /* 17: everything you read */
  --t-meta:    550 0.875rem/1.3 var(--font);  /* 14: labels, times, secondary facts */
  --track-display: -0.025em;
  --track-title: -0.012em;

  /* Space: a 4px grid, named by step. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --gutter: var(--s-4);

  /* Radius: controls < panels < sheets; chips are pills. */
  --r-control: 12px;
  --r-panel: 18px;
  --r-sheet: 26px;
  --r-pill: 999px;

  /* Targets: a thumb in a work glove. */
  --hit: 48px;
  --hit-lg: 56px;

  /* Motion: state change only. */
  --m-fast: 120ms;
  --m-base: 180ms;
  --m-sheet: 260ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (min-width: 1024px) {
  :root {
    --t-display: 700 3rem/1.05 var(--font);
    --t-title: 650 1.5rem/1.2 var(--font);
    --gutter: var(--s-8);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --m-fast: 0ms; --m-base: 0ms; --m-sheet: 0ms; }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* The root is the phone's text size, in every theme. (The rule above
   sets the body face on [data-theme] too, for the component page's
   specimens; on <html> it made the dark root 17px - every rem in dark
   6% larger than in light.) */
:root, :root[data-theme] { font-size: 100%; }
body, [data-theme] {
  background: var(--canvas);
  color: var(--ink-1);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
body { margin: 0; }
.num, .t-display, .readout__amount, .stat__value, .row__trail {
  font-variant-numeric: tabular-nums;
}
.t-display { font: var(--t-display); letter-spacing: var(--track-display); margin: 0; }
.t-title   { font: var(--t-title); letter-spacing: var(--track-title); margin: 0; }
.t-body    { font: var(--t-body); margin: 0; }
.t-meta    { font: var(--t-meta); margin: 0; color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ink-2 { color: var(--ink-2); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.icon {
  width: 22px; height: 22px;
  flex: none;
  vertical-align: middle;
}
.icon--sm { width: 18px; height: 18px; }

.mark {
  display: inline-block;
  width: 28px; height: 28px;
  background: currentColor;
  -webkit-mask: url("sheep-mark.png") center / contain no-repeat;
          mask: url("sheep-mark.png") center / contain no-repeat;
}