/**
 * Central design tokens for the theme: colors, fonts, spacing, breakpoints.
 *
 * Values here are pulled from what the site already uses (main.css,
 * theme option defaults) — changing a value here changes it everywhere
 * that references the variable instead of a hardcoded value.
 *
 * New theme code (front-page, author, current-voices, our-shows templates
 * and their CSS) is built against these variables. The legacy main.css
 * bundle predates this system and still has hardcoded values in most
 * places — bringing it fully onto variables is a separate, larger pass,
 * not part of this rebuild.
 *
 * --font-display is the brand's "PincoyaBlack" logo face (see the
 * brand guide) — it isn't wired up yet because the theme doesn't have
 * the actual font file, only reference images of it. Once a .woff2/.ttf
 * is provided, add it via @font-face here and it's usable everywhere
 * through var(--font-display); the fallback to Poppins is what's live
 * in the meantime.
 */

:root {
  /* Brand — from the official Rolling Tape brand guide */
  --color-accent: #de4b2d;       /* retro #3 */
  --color-accent-dark: #d12628;  /* retro #4 */

  --color-off-black: #393839;
  --color-off-white: #ded2bc;

  --color-retro-1: #78bea3; /* teal */
  --color-retro-2: #e79d35; /* amber */
  --color-retro-3: #de4b2d; /* orange-red (= accent) */
  --color-retro-4: #d12628; /* red */
  --color-retro-5: #981c32; /* maroon */
  --color-retro-6: #521c47; /* purple */

  /* Neutrals */
  --color-black: #000000;
  --color-near-black: var(--color-off-black);
  --color-text: #1a1a1a;
  --color-text-muted: #444444;
  --color-text-faint: #7c7c7c;
  --color-border: #d1d1d1;
  --color-border-light: #eeeeee;
  --color-white: #ffffff;

  /* Surfaces */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f7f7;
  --color-bg-dark: var(--color-off-black);

  /* Fonts */
  --font-sans: "Poppins", sans-serif;
  --font-serif: "Libre Baskerville", serif;
  --font-display: "PincoyaBlack", "Poppins", sans-serif; /* brand display face — see note below */

  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-h1: clamp(2rem, 4vw, 3.5rem);
  --font-size-h2: clamp(1.5rem, 2.5vw, 2.25rem);
  --font-size-h3: 1.25rem;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-padding: var(--space-4);
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Breakpoints (for reference in comments — CSS vars can't drive @media) */
  /* sm: 576px, md: 768px, lg: 992px, xl: 1200px */
}