/* ═══════════════════════════════════════════════════════════════
   PUERCO MUSIC — DEFAULT THEME
   All design tokens live here. Swap this file to change the
   entire visual identity of the site without touching layout.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ── */
  --bg:       #0a0806;
  --surface:  #110e0a;
  --surface2: #1a1410;
  --border:   #241c14;
  --border2:  #3a2e20;

  /* ── Text ── */
  --cream: #f2e8d4;
  --off:   #9e8a6e;
  --dim:   #52412e;

  /* ── Accent (mutates on scroll via JS) ── */
  --accent-h: 20;
  --accent-s: 92%;
  --accent-l: 54%;
  --accent:     hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-dim: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .13);

  /* ── Typography ── */
  --font-d:  'Barlow Condensed', sans-serif;   /* display / headings */
  --font-m:  'Space Mono', monospace;          /* mono labels */
  --font-ui: 'Inconsolata', monospace;         /* body / UI */

  /* ── Motion ── */
  --t: .18s;

  /* ── Scroll color stops (consumed by app.js) ──
     Format: h s l — matched by index in THEME_STOPS array   ── */
}

/* ── Scroll palette worlds (read by app.js via CSS custom props) ──
   Override in a different theme file to change the mutation cycle. */
:root {
  --stop-0-h: 20;  --stop-0-s: 92; --stop-0-l: 54;  /* SANDALWOOD ORANGE  */
  --stop-1-h: 142; --stop-1-s: 80; --stop-1-l: 46;  /* TRANSMISSION GREEN */
  --stop-2-h: 316; --stop-2-s: 75; --stop-2-l: 52;  /* DEEP MAGENTA       */
  --stop-3-h: 204; --stop-3-s: 88; --stop-3-l: 52;  /* COBALT             */
  --stop-4-h: 54;  --stop-4-s: 96; --stop-4-l: 52;  /* ACID YELLOW        */
}