/* ═══════════════════════════════════════════════════════════════════
   THE VELVET REPLY THEME - Clean Modern Luxury
   ═══════════════════════════════════════════════════════════════════
   Color palette extracted from thevelvetreply.com
   Deep reds, golds, and cream on black - elegant and refined
   
   Load: base.css + thevelvetreply.css
═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────
     COLOR PALETTE - THE VELVET REPLY OVERRIDES
  ───────────────────────────────────────────────── */

  /* Background layers - luxury black */
  --zar-bg: #0a0a0a;
  --zar-bg-secondary: #141414;
  --zar-bg-tertiary: #1a1a1a;

  /* Text colors - clean cream/white */
  --zar-text: #f5f5f5;
  --zar-text-muted: #a0a0a0;
  --zar-text-faint: #666666;

  /* Gold accent - warm luxury (WCAG AA compliant on #0a0a0a) */
  --zar-accent: #d4af37;
  --zar-accent-dark: #a88d24;
  --zar-accent-light: #e8c950;
  --zar-accent-glow: rgba(212, 175, 55, 0.15);

  /* Gold from thevelvetreply.com */
  --zar-gold: #d4af37;
  --zar-gold-dark: #a88d24;
  --zar-gold-light: #e8c950;

  /* Cream/off-white */
  --zar-cream: #f5f5f5;

  /* ─────────────────────────────────────────────────
     PLAYER COMPONENT COLORS
  ───────────────────────────────────────────────── */

  --zar-player-bg: #141414;
  --zar-player-border: rgba(212, 175, 55, 0.15);
  --zar-player-shadow: rgba(0, 0, 0, 0.8);

  /* ─────────────────────────────────────────────────
     BUTTON STATES
  ───────────────────────────────────────────────── */

  --zar-button-bg: transparent;
  --zar-button-border: rgba(212, 175, 55, 0.25);
  --zar-button-text: #f5f5f5;
  --zar-button-hover: rgba(212, 175, 55, 0.1);
  --zar-button-active: rgba(212, 175, 55, 0.2);

  /* ─────────────────────────────────────────────────
     VISUALIZER
  ───────────────────────────────────────────────── */

  --zar-visualizer-color: #d4af37;
  --zar-visualizer-bg: rgba(20, 20, 20, 0.9);
  --zar-visualizer-line-width: 1.5;

  /* ─────────────────────────────────────────────────
     PROGRESS BAR
  ───────────────────────────────────────────────── */

  --zar-progress-bg: rgba(212, 175, 55, 0.15);
  --zar-progress-fill: #d4af37;
  --zar-progress-handle: #d4af37;

  /* ─────────────────────────────────────────────────
     LYRICS
  ───────────────────────────────────────────────── */

  --zar-lyrics-color: #f5f5f5;
  --zar-lyrics-marker-color: #d4af37;

  /* ─────────────────────────────────────────────────
     ART PLACEHOLDER
  ───────────────────────────────────────────────── */

  --zar-art-placeholder-bg: #1a1a1a;

  /* ─────────────────────────────────────────────────
     SCROLLBAR
  ───────────────────────────────────────────────── */

  --zar-scrollbar-thumb: rgba(212, 175, 55, 0.3);
  --zar-scrollbar-thumb-hover: rgba(212, 175, 55, 0.6);

  /* Layout containment - keep player within container */
  --zar-hero-overflow-width: 100%;
  --zar-hero-overflow-margin: 0;
  --zar-controls-overflow-width: 100%;
  --zar-controls-overflow-margin: 0;
}