/* ═══════════════════════════════════════════════════════════════════
   INSPIRING DESIGNS THEME - Professional Tech (Dark Mode)
   ═══════════════════════════════════════════════════════════════════
   Color palette extracted from inspiringdesigns.biz
   Clean blue, orange accents, dark backgrounds matching radio subdomain
   
   Load: base.css + inspiringdesigns.css
═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────
     COLOR PALETTE - INSPIRING DESIGNS OVERRIDES
  ───────────────────────────────────────────────── */

  /* Background layers - dark mode for radio */
  --zar-bg: #0a0a0f;
  --zar-bg-secondary: #12111a;
  --zar-bg-tertiary: #1a1828;

  /* Text colors - dark gray on light backgrounds */
  --zar-text: #f0ece4;
  --zar-text-muted: #8a8070;
  --zar-text-faint: #4a4540;

  /* Primary blue from inspiringdesigns.biz */
  --zar-accent: #0a90ff;
  --zar-accent-dark: #0874d9;
  --zar-accent-light: #4db3ff;
  --zar-accent-glow: rgba(10, 144, 255, 0.1);

  /* Secondary orange */
  --zar-secondary: #ff9800;
  --zar-secondary-dark: #fb8c00;
  --zar-secondary-light: #ffb333;

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

  --zar-player-bg: #12111a;
  --zar-player-border: rgba(10, 144, 255, 0.1);
  --zar-player-shadow: rgba(0, 0, 0, 0.1);

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

  --zar-button-bg: transparent;
  --zar-button-border: rgba(10, 144, 255, 0.2);
  --zar-button-text: #f0ece4;
  --zar-button-hover: rgba(10, 144, 255, 0.08);
  --zar-button-active: rgba(10, 144, 255, 0.15);

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

  --zar-visualizer-color: #0a90ff;
  --zar-visualizer-bg: rgba(18, 17, 26, 0.8);
  --zar-visualizer-line-width: 1.5;

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

  --zar-progress-bg: rgba(10, 144, 255, 0.1);
  --zar-progress-fill: #0a90ff;
  --zar-progress-handle: #0a90ff;

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

  --zar-lyrics-color: #f0ece4;
  --zar-lyrics-marker-color: #0a90ff;

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

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

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

  --zar-scrollbar-thumb: rgba(10, 144, 255, 0.3);
  --zar-scrollbar-thumb-hover: rgba(10, 144, 255, 0.6);

  /* ─────────────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────────────── */

  /* Professional sans-serif */
  --zar-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --zar-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

  /* ─────────────────────────────────────────────────
     LAYOUT CONTAINMENT
  ───────────────────────────────────────────────── */

  /* Override full-bleed to stay within .playerInner container */
  --zar-hero-overflow-width: 100%;
  --zar-hero-overflow-margin: 0;
  --zar-controls-overflow-width: 100%;
  --zar-controls-overflow-margin: 0;
}

/* ─────────────────────────────────────────────────
   RESPONSIVE ADJUSTMENTS
───────────────────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --zar-visualizer-height: 200px;
    --zar-album-art-size: 150px;
  }
}