:root {
  /* Channel triplets back the hex tokens below so translucent uses can say
     `rgb(var(--red-rgb) / 0.12)` instead of re-typing the literal. Any color
     that appears at more than one alpha has one. */
  --bg-rgb: 10 9 8;
  --bone-rgb: 255 238 220;
  --amber-rgb: 244 162 60;
  --red-rgb: 229 52 43;
  --signal-rgb: 134 201 138;
  --on-fill-rgb: 255 255 255;

  --bg: rgb(var(--bg-rgb));
  --coal: #15110d;
  --soot: #1e1712;
  --ember-coal: #2a211a;
  --text: #f3ede3;
  --text-body: #c3baac;
  --text-muted: #a79e92;
  --text-dim: #7e766c;
  /* Ember/amber: ambient light only — stage glow, logo halo, 3px top filament. Never on buttons/links/labels. */
  --amber: rgb(var(--amber-rgb));
  --amber-hover: #f8b85a;
  /* Flare red: the single action color. */
  --red: rgb(var(--red-rgb));
  --red-hover: #ef4036;
  --blood: #b5241b;
  /* Text sitting on a saturated fill — Flare buttons, the tag eyebrow,
     selection, and the social icons' brand-tint hover. */
  --on-fill: rgb(var(--on-fill-rgb));
  --signal: rgb(var(--signal-rgb));
  /* Social brand tints — the one sanctioned exception to "Flare is the only
     color". These identify four external destinations rather than actions, so
     each is desaturated toward the ink palette: present enough to be read as
     the platform's own hue, never as loud as Flare. */
  --brand-instagram: #b85e7b;
  --brand-facebook: #5a82b8;
  --brand-spotify: #5e9e73;
  --brand-youtube: #b3675f;
  --fill-bone: rgb(var(--bone-rgb) / 0.04);
  --wash-flare: rgb(var(--red-rgb) / 0.07);
  --line: rgb(var(--bone-rgb) / 0.12);
  --line-strong: rgb(var(--bone-rgb) / 0.18);
  --line-head: rgb(var(--bone-rgb) / 0.14);
  --line-top: rgb(var(--bone-rgb) / 0.16);
  /* Field borders — the button / booking-bar 1.5px hairline. */
  --line-field: rgb(var(--bone-rgb) / 0.5);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --radius-pill: 999px;
  --container: 1280px;
  --header-h: 63px;
  --gutter: clamp(18px, 4vw, 36px);
  --section: clamp(58px, 8vw, 92px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 64px;
}