/* GuitarGangsters design tokens — docs/DESIGN-SYSTEM.md §3. Single source of truth for colour,
   type, spacing, grid and ratios. Components reference tokens only; never raw values. */

/* Self-hosted fonts (docs/DESIGN-ASSETS.md) — latin subset only (English content), served from
   ../fonts/. Licenses alongside the files: OFL-oswald.txt, OFL-source-sans-3.txt (SIL Open Font
   License), LICENSE-permanent-marker.txt (Apache 2.0 — Permanent Marker is Apache-licensed, not
   OFL, despite the family being commonly lumped in with Google's "open font" set). Oswald and
   Source Sans 3 are each a single variable-weight file reused across the three declared weights
   (matches Google Fonts' own generated CSS — the browser selects the instance). */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/oswald-variable-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-variable-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/permanent-marker-400-latin.woff2") format("woff2");
}

:root {
  /* Colour: paper & ink */
  --paper: #ede6d3;
  --paper-2: #f6f1e6;
  --paper-3: #e2d9c2;
  --ink: #161311;
  --ink-2: #3d3733;
  --ink-3: #6e6660;
  --line: var(--ink);

  /* Brand + section accents (contrast-checked on --paper: >= 4.5:1 for normal text, WCAG AA).
     gold/teal/orange were darkened 2026-09-12 (axe-core found 2.98/3.81/3.59:1 — the comment's
     claim wasn't actually true for them) without changing hue; --red already passed. */
  --red: #b8231f;
  --red-2: #8f1a17;
  --gold: #895f17;
  --teal: #297069;
  --orange: #a94a16;
  --cream-on-ink: #f6f1e6;

  --accent: var(--red);
  --accent-contrast: #fff;

  /* Typography */
  --font-display: "Oswald", "Bebas Neue", "Arial Narrow", Impact, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mark: "Permanent Marker", "Segoe Print", "Bradley Hand", cursive;

  --fs-0: 0.8125rem;
  --fs-1: 0.9375rem;
  --fs-2: 1.0625rem;
  --fs-3: 1.25rem;
  --fs-4: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-5: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --fs-6: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-7: clamp(3rem, 1.5rem + 6.5vw, 6.5rem);

  --lh-tight: 0.92;
  --lh-snug: 1.15;
  --lh-body: 1.55;
  --tracking-caps: 0.12em;

  /* Spacing (4 px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Layout */
  --container-max: 82.5rem;
  --gutter: clamp(1rem, 2.5vw, 1.5rem);
  --prose-max: 44rem;
  --rule: 2px solid var(--line);
  --rule-thin: 1px solid var(--paper-3);
  --radius-pill: 999px;

  /* Aspect ratios */
  --ratio-card: 3 / 2;
  --ratio-hero: 16 / 9;
  --ratio-tile: 4 / 3;
  --ratio-thumb: 1 / 1;

  /* Motion */
  --ease: 160ms ease-out;

  /* Fact-box grid icons (editorial.css .fact-box--grid, content-pipeline's FactBoxSupport) - real
     generated artwork (Higgsfield/nano-banana, 2026-09-15), not baked into stored post_content
     (ADR-0001: theme owns presentation - content-pipeline only ever emits a `fact-box__cell--<slug>`
     class, this file decides what renders for it). Each PNG is a solid black silhouette with the
     white background threshold-converted to real alpha transparency and cropped to its own bounding
     box (bin/ was not the right place for one-off asset processing, done directly), so it works as a
     CSS mask (currentColor) exactly like the hand-authored SVGs it replaces - same --accent-driven
     colouring, just real artwork instead of geometric placeholders. The 16-icon set (12 new beyond
     the original guitar/amp/effect/generic four) was sized against real archive data, not guessed -
     see bin/analyze-fact-labels.php, which tallies actual Quick-Facts/Specification label frequency
     across the whole archive (2060 distinct labels found; this set covers the top ~40 by count). */
  --fact-icon-generic: url("../img/icons/generic.png");
  --fact-icon-guitar: url("../img/icons/guitar.png");
  --fact-icon-amp: url("../img/icons/amp.png");
  --fact-icon-effect: url("../img/icons/effect.png");
  --fact-icon-weight: url("../img/icons/weight.png");
  --fact-icon-dimensions: url("../img/icons/dimensions.png");
  --fact-icon-power: url("../img/icons/power.png");
  --fact-icon-neck: url("../img/icons/neck.png");
  --fact-icon-body: url("../img/icons/body.png");
  --fact-icon-hardware: url("../img/icons/hardware.png");
  --fact-icon-pickups: url("../img/icons/pickups.png");
  --fact-icon-controls: url("../img/icons/controls.png");
  --fact-icon-connectivity: url("../img/icons/connectivity.png");
  --fact-icon-price: url("../img/icons/price.png");
  --fact-icon-origin: url("../img/icons/origin.png");
  --fact-icon-warranty: url("../img/icons/warranty.png");
}

/* Section accents: set once via data-section on any ancestor or element. */
[data-section="legends"] { --accent: var(--red); }
[data-section="gear"]    { --accent: var(--gold); }
[data-section="diy"]     { --accent: var(--teal); }
[data-section="history"] { --accent: var(--ink); --accent-contrast: var(--cream-on-ink); }
[data-section="news"]    { --accent: var(--orange); }
[data-section="videos"]  { --accent: var(--gold); }
[data-section="setlists"] { --accent: var(--teal); }