/* ==========================================================================
   TOKENS — the single source of truth for colour, type, spacing, motion.
   Nothing in the other CSS files should hardcode a colour or a font name;
   everything reaches back here through a custom property. Change the look
   of the whole site by editing this file alone.
   ========================================================================== */

:root {
  /* ---- colour: Bad Tactics palette --------------------------------- */
  --teal:        #16636A; /* PRIMARY: buttons, links, page grounds, active nav */
  --teal-deep:   #0A3B41; /* shadows under panels, footers, hover */
  --teal-bright: #2A9AA0; /* focus rings, hover lifts */
  --paper:       #E7DAC1; /* kraft card stock — panels, cards, page-back on curl */
  --paper-light: #F2E9D8; /* body copy on teal, raised panel faces */
  --ink:         #101013; /* type, hard cartoon outlines */
  --red:         #F0401C; /* ACCENT ONLY — upcoming-gig tag, play button */
  --blue:        #2B55C4; /* ACCENT ONLY — camo blobs, secondary tags */

  /* ---- derived / utility colour -------------------------------------- */
  --white: #ffffff;
  --overlay-scrim: rgba(16, 16, 19, 0.72);

  /* ---- type ------------------------------------------------------------ */
  --font-body: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-h1: clamp(2.4rem, 6vw + 1rem, 5rem);
  --fs-h2: clamp(1.8rem, 4vw + 1rem, 3rem);
  --fs-h3: clamp(1.25rem, 2vw + 1rem, 1.75rem);
  --fs-quote: clamp(1.3rem, 2.5vw + 1rem, 2rem);
  --lh-body: 1.55;
  --lh-heading: 1.02;
  --ls-heading: -0.02em;

  /* ---- spacing scale ----------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* ---- shape / shadow ------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 10px;
  --shadow-hard: 8px 8px 0 var(--teal-deep);
  --shadow-hard-sm: 5px 5px 0 var(--teal-deep);
  --border-cartoon: 3px solid var(--ink);

  /* ---- motion --------------------------------------------------------- */
  --dur-curl: 650ms;
  --dur-wipe: 550ms;
  --dur-reduced: 120ms;
  --ease-curl: cubic-bezier(.62, 0, .34, 1);
  --ease-wipe: cubic-bezier(.5, 0, .2, 1);

  /* ---- layout --------------------------------------------------------- */
  --content-max: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-height: 4.5rem;
}