/* ==========================================================================
   BON JEU — shared tokens and reset
   Loaded by every page before its own stylesheet. Holds only what is genuinely
   shared: the palette, the type stack and the reset. Page background and ink
   are deliberately NOT set here — the hero runs light-on-dark, the product
   pages run dark-on-cream.
   ========================================================================== */

:root {
  /* Brand board palette. These hex values are the source of truth — see
     BRAND-BRIEF.md §9. */
  --navy: #112e67;
  --cobalt: #1f5fe0;
  --sky: #b7ddf5;
  --cream: #f4f0e6;
  --white: #ffffff;
  --black: #111111;
  --kelly: #0a8a53;
  --coral: #f26c63;
  --lilac: #c5b3e6;
  --pink: #f05f93;
  --red-orange: #ff6b3d;

  --font-display: 'Anybody', 'Eurostile', 'Helvetica Neue', sans-serif;
  --font-ui: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* The comp's UI face is narrower than stock Archivo — at matched cap height
     its glyphs run ~14% tighter — so the width axis is pulled in, which also
     leaves room for the visible tracking the comp has. */
  --ui-wdth: 88;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-ui);
  font-variation-settings: 'wdth' var(--ui-wdth);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit; color: inherit;
  background: none; border: 0; cursor: pointer;
}

img { display: block; max-width: 100%; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Chrome's UA stylesheet sets `text-transform: none` on form controls, so
   buttons never inherit an ancestor's uppercase. */
button, input, select { text-transform: inherit; }