/* ==========================================================================
   BEATSHOUSE — Theme Bridge v5.0
   ANALOG HEAT — amber accent, warm near-black surfaces.
   ========================================================================== */

:root {
  /* Canonical tokens — violet/OLED dark palette */
  --bh-accent:       #C8FF00;
  --bh-accent-2:     #E8FF88;
  --bh-accent-dim:   rgba(200,255,0,.12);
  --bh-bg: #000;
  --bh-bg-soft: #080808;
  --bh-surface:      rgba(255, 255, 255, 0.03);
  --bh-card:         rgba(255, 255, 255, 0.03);
  --bh-border:       rgba(255, 255, 255, 0.06);
  --bh-border-hover: rgba(255, 255, 255, 0.12);
  --bh-text:         rgba(255, 255, 255, 0.92);
  --bh-text-muted:   rgba(255, 255, 255, 0.28);
  --bh-text-soft:    rgba(255, 255, 255, 0.5);
  --bh-mono:         'DM Mono', 'Space Mono', ui-monospace, monospace;
  --bh-heading:      'Syne', system-ui, sans-serif;
  --bh-body:         'Manrope', system-ui, -apple-system, sans-serif;
  --bh-radius: 0px;
  --bh-radius-pill:  999px;
  --bh-shadow:       0 8px 28px rgba(0, 0, 0, 0.6);
  --bh-highlight:    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Semantic */
  --bh-green:        #4ADE80;
  --bh-red:          #FF5252;
}

/* Global body scoped to beatshouse */
.beatshouse-theme,
.beatshouse-theme body {
  background: var(--bh-bg);
  color: var(--bh-text);
  font-family: var(--bh-body);
  -webkit-font-smoothing: antialiased;
}

#waveform { min-height: 60px; width: 100%; }

.beatshouse-theme a {
  color: var(--bh-text-soft);
  text-decoration: none;
}

.beatshouse-theme a:hover {
  color: var(--bh-text);
}

/* Headings */
.beatshouse-theme h1,
.beatshouse-theme h2,
.beatshouse-theme h3,
.beatshouse-theme h4 {
  font-family: var(--bh-heading);
  letter-spacing: 0.02em;
  color: var(--bh-text);
}

.beatshouse-theme .bh-heading,
.beatshouse-theme .bh-title {
  font-family: var(--bh-heading);
  letter-spacing: 0.02em;
  color: var(--bh-text);
}

.beatshouse-theme .bh-subtitle,
.beatshouse-theme .bh-muted {
  color: var(--bh-text-muted);
  font-size: 13px;
}

/* Cards / surfaces */
.beatshouse-theme .bh-card,
.beatshouse-theme .bh-panel,
.beatshouse-theme .bh-surface {
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-radius);
  box-shadow: var(--bh-shadow), var(--bh-highlight);
}

/* Pills */
.beatshouse-theme .bh-chip,
.beatshouse-theme .bh-pill,
.beatshouse-theme .pill,
.beatshouse-theme .vault-tab {
  border: 1px solid var(--bh-border);
  background: transparent;
  color: var(--bh-text-muted);
  border-radius: var(--bh-radius-pill);
}

.beatshouse-theme .bh-chip.is-active,
.beatshouse-theme .bh-pill.active,
.beatshouse-theme .pill.active,
.beatshouse-theme .vault-tab.active {
  border-color: rgba(200,255,0, 0.3);
  color: #E8FF88;
  background: rgba(200,255,0, 0.1);
  box-shadow: inset 0 1px 0 rgba(200,255,0, 0.1);
}

/* Buttons baseline */
.beatshouse-theme .bh-btn,
.beatshouse-theme button,
.beatshouse-theme .btn-action,
.beatshouse-theme .btn-save-edit {
  font-family: var(--bh-body);
  letter-spacing: 0.02em;
  border-radius: 0;
  border: 1px solid var(--bh-border);
  background: var(--bh-card);
  color: var(--bh-text);
  transition: border-color var(--bh-ease, 0.18s ease),
              background var(--bh-ease, 0.18s ease),
              color var(--bh-ease, 0.18s ease);
}

/* Primary button override */
.beatshouse-theme .bh-btn-primary,
.beatshouse-theme .btn-action.primary,
.beatshouse-theme .btn-save-edit:hover {
  background: var(--bh-text);
  color: var(--bh-bg);
  border-color: transparent;
  box-shadow: none;
}

/* Inputs */
.beatshouse-theme input,
.beatshouse-theme select,
.beatshouse-theme textarea {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  color: var(--bh-text);
  font-family: var(--bh-body);
  border-radius: 0;
}

.beatshouse-theme input:focus,
.beatshouse-theme select:focus,
.beatshouse-theme textarea:focus {
  outline: none;
  border-color: rgba(200,255,0, 0.35);
  box-shadow: 0 0 0 3px rgba(200,255,0, 0.08);
}

/* Dividers */
.beatshouse-theme .bh-divider {
  height: 1px;
  background: var(--bh-border);
  margin: 14px 0;
}

/* Badges */
.beatshouse-theme .bh-badge,
.beatshouse-theme .badge {
  font-family: var(--bh-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bh-text-muted);
}

/* Glow — subtle violet ambient */
.beatshouse-theme .bh-glow {
  box-shadow: 0 0 24px rgba(200,255,0, 0.1), 0 0 60px rgba(0, 0, 0, 0.4);
}

/* Grid / sections */
.beatshouse-theme .bh-grid    { display: grid; gap: 16px; }
.beatshouse-theme .bh-section { padding: 32px 0; }

.beatshouse-theme .bh-text-small {
  font-size: 12px;
  color: var(--bh-text-muted);
}

/* Legacy module variable bridges */
.beatshouse-theme {
  --hm-accent:  var(--bh-accent);
  --hm-bg:      var(--bh-bg-soft);
  --hm-card:    var(--bh-card);
  --hm-gold:    var(--bh-accent-2);
  --sk-bg:      var(--bh-bg);
  --sk-card:    var(--bh-card);
  --sk-border:  rgba(255, 255, 255, 0.06);
  --bh-ease:    180ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Component normalization (legacy class names → new tokens) */
.beatshouse-theme .hm-drop-card,
.beatshouse-theme .bh-price-card,
.beatshouse-theme .edit-container-inner,
.beatshouse-theme .bh-ticket,
.beatshouse-theme .bh-intro-card,
.beatshouse-theme .vault-panel {
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-radius);
  box-shadow: var(--bh-highlight);
}

/* Track row: transparent by default — beats-page.css controls its visual */
.beatshouse-theme .track-row {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
}

.beatshouse-theme .btn-action,
.beatshouse-theme .btn-toggle-admin,
.beatshouse-theme .bh-btn,
.beatshouse-theme .bh-intro-btn {
  border-radius: 0;
  border: 1px solid var(--bh-border);
}

.beatshouse-theme .btn-action:hover,
.beatshouse-theme .btn-toggle-admin:hover {
  border-color: var(--bh-border-hover);
  color: var(--bh-text);
}

.beatshouse-theme .pill.reset {
  color: var(--bh-red);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Layout safety */
.beatshouse-theme *,
.beatshouse-theme *::before,
.beatshouse-theme *::after { box-sizing: border-box; }

.beatshouse-theme img,
.beatshouse-theme video,
.beatshouse-theme iframe,
.beatshouse-theme svg { max-width: 100%; height: auto; }

.beatshouse-theme .bh-app,
.beatshouse-theme .bst-main {
  width: 100%;
  overflow-x: clip; /* iOS Safari scroll fix — clip does not create a scroll container */
}

.beatshouse-theme .entry-content,
.beatshouse-theme .site-content,
.beatshouse-theme .site-main {
  width: 100%;
  max-width: none;
  padding: 0;
}