/* 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;
}

/* 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); }