/* Minimal base styles. Every value comes from tokens.css - no raw pixels
 * here, so a density change moves the whole page (07-website.md 4.1). */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: var(--font-base);
  line-height: var(--line-height);
  color: var(--colour-text);
  background: var(--colour-bg);
}

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

h1 { font-size: var(--font-display); margin: 0 0 var(--space-md); }
p  { margin: 0 0 var(--space-md); }
.muted { color: var(--colour-text-muted); font-size: var(--font-sm); }

a { color: var(--colour-primary); }

/* Interactive controls never fall below the tap floor. */
button, .button, input, select, textarea {
  min-height: var(--control-min-height);
  font: inherit;
  border-radius: var(--radius);
}

/* A BUTTON MUST NEVER RELY ON THE BROWSER'S DEFAULT TEXT COLOUR.
 *
 * `.switch button` and `.stepper button` set a background and no colour, so
 * their labels were drawn in whatever the user agent thought a button's text
 * should be. Chrome says black, so every desktop check passed. iOS Safari,
 * which had not been told to stop drawing a native button, resolved it to
 * something invisible against the white - and the owner's iPhone showed an
 * empty "Delivery" button and a quantity stepper with no minus or plus.
 *
 * The tell was that `.switch button[aria-pressed="true"]` DOES set a colour:
 * the selected side was readable and the unselected side was blank, whichever
 * way round it was.
 *
 * So the colour is stated here for every button, and the native appearance is
 * turned off so nothing is left to a platform's opinion. Variants that want a
 * different colour still override it. `appearance` is deliberately NOT set on
 * inputs and selects, which need their native affordances. */
button, .button {
  color: var(--colour-text);
  -webkit-appearance: none;
  appearance: none;
}

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

/* A label that only a screen reader reads.

   Used where a column heading already says what a box is for and repeating it
   visually would be noise - but a screen reader announces one input at a time,
   with no column heading in earshot, so the label still has to exist. Clipped
   rather than display:none, because display:none removes it from the
   accessibility tree as well. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}