/* palette-source: sampled — written by palette.mjs on 2026-09-11 */
/*
  ACCENT OVERRIDDEN BY HAND, 2026-09-11, and still sampled from the shop's own mark.
  palette.mjs assigns the accent by rule: "most saturated colour far enough in hue
  from the primary". Hyper Goat's identity is a single hue family — cyan on near-black
  — so that rule found no candidate and fell back to its synthetic terracotta #b2572a,
  a colour this shop has never used. The cyan below is cluster #1a89a7 (h193 s73 l38,
  10.6% of logo pixels) from the same run, darkened to L34 so link text reaches
  4.54:1 on the background and white on it reaches 4.87:1 — the identical AA
  adjustment palette.mjs applies to its own accent. So "sampled" is the honest
  provenance for the brand sheet: this accent is more sampled than the one replaced.
*/
/*
  BRAND TOKENS — the only stylesheet the builder edits for colour and type.
  Everything in base.css reads from these variables. Keep every value here
  traceable to the shop's own branding (logo, shopfront, Instagram grid) or to
  the design-system run recorded in company-profile.md.
*/
:root {
  /* Colour */
  --color-primary: #081417;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f2f8f8;     /* text on primary */
  --color-accent: #177b96;         /* buttons, links, highlights — the logo's cyan */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f2f8f8;             /* page background */
  --color-surface: #fcfdfd;        /* cards, menu panels */
  --color-ink: #1a2223;            /* body text */
  --color-muted: #607276;          /* secondary text */
  --color-border: #dae7e7;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 700;
  --display-tracking: 0.01em;
  --display-transform: uppercase;  /* the sign, the cup sticker and the letterboard are all caps */

  /* Shape and texture */
  --radius: 14px;                  /* 0 for sharp brands, 999px for pill brands */
  --radius-sm: 8px;
  --hero-overlay: linear-gradient(180deg, rgba(8, 20, 23, 0.30), rgba(8, 20, 23, 0.70));
  --shadow: 0 10px 30px rgba(8, 20, 23, 0.10);
}