/* AI PodPal — design tokens
 * Aesthetic: studio / broadcast — dark warm vinyl & tape with amber VU glow.
 * Type: Instrument Serif (display) · Geist (UI) · JetBrains Mono (technical).
 */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Default palette: Vinyl Warm (dark) */
  --bg-deep: #0f0b08;
  --bg-base: #15110c;
  --surface: #1f1812;
  --surface-2: #2a2118;
  --surface-3: #362a1e;
  --line: #3d3023;
  --line-strong: #54422f;
  --fg: #f4ead8;
  --fg-dim: #b8a98e;
  --fg-mute: #7a6c54;
  --accent: #e89a4a;       /* amber tape glow */
  --accent-soft: #b87434;
  --accent-2: #d44a2e;     /* live red */
  --signal: #5fb389;       /* green VU */
  --signal-hot: #f0c34a;   /* yellow VU */
  --peak: #ff5f3a;         /* peak red */

  --grain: rgba(232, 154, 74, 0.03);

  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-ui: 'Geist', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  --shadow-soft: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.4);
  --shadow-deep: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 56px rgba(0,0,0,0.55);
  --glow-amber: 0 0 24px rgba(232, 154, 74, 0.35);
  --glow-live: 0 0 18px rgba(212, 74, 46, 0.6);
}

/* Palette: Midnight Studio */
[data-palette="midnight"] {
  --bg-deep: #06080f;
  --bg-base: #0c1119;
  --surface: #141a26;
  --surface-2: #1c2434;
  --surface-3: #283448;
  --line: #2a3548;
  --line-strong: #3d4d68;
  --fg: #e8eef5;
  --fg-dim: #9fb0c8;
  --fg-mute: #5d6e88;
  --accent: #6ba2ff;
  --accent-soft: #3d7adc;
  --accent-2: #ff5478;
  --glow-amber: 0 0 24px rgba(107, 162, 255, 0.4);
}

/* Palette: Mahogany (deep red-brown) */
[data-palette="mahogany"] {
  --bg-deep: #100604;
  --bg-base: #190a07;
  --surface: #25100a;
  --surface-2: #321811;
  --surface-3: #43221a;
  --line: #4a261c;
  --line-strong: #6a3826;
  --fg: #f0dcc8;
  --fg-dim: #c2a288;
  --fg-mute: #826852;
  --accent: #d97b3f;
  --accent-soft: #a85a2a;
  --accent-2: #e0432a;
  --glow-amber: 0 0 24px rgba(217, 123, 63, 0.4);
}

/* Light mode: Cream */
[data-mode="light"] {
  --bg-deep: #e8dcc2;
  --bg-base: #f1e6cf;
  --surface: #f7eedb;
  --surface-2: #ebe0c8;
  --surface-3: #ddcfb3;
  --line: #d4c4a6;
  --line-strong: #b8a482;
  --fg: #1f1610;
  --fg-dim: #5a4a38;
  --fg-mute: #8a785e;
  --accent: #b86628;
  --accent-soft: #8f4d1c;
  --accent-2: #c43a1e;
  --shadow-soft: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(60,40,20,0.12);
  --shadow-deep: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 40px rgba(60,40,20,0.18);
  --grain: rgba(60, 40, 20, 0.025);
}

/* Density */
[data-density="compact"] {
  --space-1: 4px;  --space-2: 6px;  --space-3: 10px;
  --space-4: 14px; --space-5: 18px; --space-6: 24px;
  --space-7: 32px; --space-8: 44px; --space-9: 60px;
  --pad-card: 16px;
}
[data-density="spacious"], :root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 18px; --space-5: 24px; --space-6: 36px;
  --space-7: 52px; --space-8: 72px; --space-9: 100px;
  --pad-card: 24px;
}

/* Universal small utilities */
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.display { font-family: var(--font-display); font-weight: 400; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: var(--surface);
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.dot.live {
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2);
  animation: livepulse 1.4s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Tape grain texture overlay (subtle) */
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    var(--grain) 0px,
    var(--grain) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
  z-index: 1;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: -0.01em;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn.primary {
  background: var(--accent);
  color: #1a0f05;
  border-color: var(--accent);
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-dim); }
.btn.ghost:hover { color: var(--fg); background: var(--surface); }
.btn.live {
  background: var(--accent-2);
  color: white;
  border-color: var(--accent-2);
  box-shadow: var(--glow-live);
}

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad-card);
  position: relative;
}

/* Waveform CSS-only */
.wf {
  display: flex; align-items: center; gap: 2px;
  height: 40px;
}
.wf > i {
  display: block;
  width: 3px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0.85;
}

/* Reset */
* { box-sizing: border-box; }