/* Every Tap design tokens.
   Source of truth: docs/09-brand-guidelines.md, locked 16 September 2026.
   Contrast ratios measured against WCAG 2.1, 15 September 2026, and recorded
   in section 5 of that document. Do not add a colour without adding its
   measured ratios there first. */

:root {

  /* ---- Brand palette, doc 09 section 5 ---- */

  --coral:       #FF6B4A;  /* FILL ONLY. 2.50:1 on Paper. Never sets type on a light ground. */
  --coral-deep:  #D42700;  /* Coral-coloured TYPE on a light ground. 4.55:1 on Paper. */
  --deep-pine:   #12332B;  /* Wordmark, body text, headings, reversed grounds. 12.14:1 on Paper. */
  --paper:       #F4F1EA;  /* Page and card grounds. Reversed text on Deep Pine. */
  --white:       #FFFFFF;  /* Form field interiors only. Not a page ground. */

  /* Deep Pine on Coral is 4.86:1 and passes AA. White on Coral is 2.82:1 and
     fails even the 3:1 large-text floor, so text on coral is ALWAYS Deep Pine. */

  /* ---- Semantic ---- */

  --bg:            var(--paper);
  --bg-reversed:   var(--deep-pine);
  --text:          var(--deep-pine);
  --text-reversed: var(--paper);
  --heading:       var(--deep-pine);
  --link:          var(--coral-deep);
  --accent-fill:   var(--coral);
  --field:         var(--white);
  --rule:          rgba(18, 51, 43, 0.18);

  /* ---- Type, doc 09 section 6 ----
     Overpass for display and the interface, IBM Plex Sans for body copy,
     Chivo Mono for every figure.
     Section 6.1: every figure, at every size, without exception. */

  /* Two faces, not one. Overpass is a signage face and was chosen for the
     Highway Gothic lineage in doc 09 section 6, which is an argument about
     letterforms you glance at. It keeps the wordmark, every heading and the
     interface. Body copy moved to IBM Plex Sans on 17 September 2026 because
     Overpass closes up at reading size and most of this site is long-form.
     Plex was drawn for long technical documents and sits in the same
     register: infrastructure, maintained rather than sold. */
  /* Figures moved from Overpass Mono to Chivo Mono on 17 September 2026.
     Overpass Mono draws a dot inside its zero and offers no alternate and no
     OpenType feature to switch it off, so every price on the site carried it.
     Nine other monospace faces were checked and eight are the same. Chivo Mono
     has a plain zero, and doc 09 section 6 already names Chivo as a sanctioned
     family. See docs/09-brand-guidelines.md section 6. */
  --font:      Overpass, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --w-body:    400;
  --w-bold:    700;
  --w-black:   900;
  --w-fig:     500;
  --w-fig-bold:700;

  /* Fluid scale. Floor is the 390px phone, ceiling is 1280px.
     Body floor 17px and H1 floor 32px are set by build brief 01 section 3. */
  --t-body:  clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --t-small: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --t-h3:    clamp(1.1875rem, 1.10rem + 0.44vw, 1.4375rem);
  --t-h2:    clamp(1.5rem, 1.31rem + 0.95vw, 2.125rem);
  --t-h1:    clamp(2rem, 1.55rem + 2.25vw, 3.25rem);
  --t-price: clamp(2.25rem, 1.70rem + 2.75vw, 3.75rem);

  --lh-tight: 1.1;
  --lh-head:  1.18;
  --lh-body:  1.55;
  --measure:  66ch;

  /* ---- Shape language, doc 09 section 7.3 ----
     A bowl is flat across the top and round at the bottom. Every container
     in the brand follows it. Nobody will consciously name this, and it is
     most of what separates a brand that was designed from one configured. */

  --r-seal:   4px 4px 34px 34px;
  --r-button: 3px 3px 16px 16px;
  --r-card:   3px 3px 22px 22px;
  --r-photo:  2px 2px 20px 20px;
  --r-field:  3px 3px 10px 10px;

  /* ---- Lockup construction, doc 09 section 7.2 ----
     Expressed against the lockup's own font-size so it scales as one object. */

  --lock-bar-h:      0.185em;
  --lock-bar-r:      0.055em;
  --lock-bar-gap:    0.055em;
  --lock-bowls-h:    0.60em;
  --lock-word-gap:   0.26em;
  --lock-word-size:  0.72em;
  --lock-word-track: -0.03em;
  --lock-word-lead:  0.8;

  /* ---- Space ---- */

  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;
  --wrap: 1120px;
  --tap: 48px;    /* minimum tap target, build brief 01 section 3 */

  /* ---- Focus ring ----
     Two parts on every surface, because no single colour clears both Paper
     and Deep Pine. Coral outline carries the brand, the Paper offset carries
     the contrast on the dark ground. */

  --focus-outline: 3px solid var(--coral);
  --focus-offset:  2px;
  --focus-shadow:  0 0 0 5px rgba(244, 241, 234, 0.9);
}

@font-face {
  font-family: Overpass;
  src: url('/assets/fonts/overpass-var-latin.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url('/assets/fonts/ibm-plex-sans-var-latin.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Chivo Mono";
  src: url('/assets/fonts/chivo-mono-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}