/*
 * Scheme D: Breadbin Tan
 * Walnut/cream warmth. Vivid ruby active, muted lime progressions.
 * C64-inspired retro color palette.
 * Loads AFTER styles.css to override colors only.
 */

/* --- Font --- */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

* {
  font-family: 'Share Tech Mono', 'Courier New', monospace !important;
}

/* --- Base --- */
body {
  background-color: #2e2418;
  color: #d8c8a0;
}

h1, h2 { color: #f0e0c0; }

label {
  color: #b0a080;
}

/* --- Control Panel --- */
.control-panel {
  background: #3e3225;
}

/* --- Slider Categories --- */
.cat-shape > label { color: #90c860; }
.cat-filter > label { color: #80b850; }
.cat-filter input[type="range"] { accent-color: #80b850; }
.cat-amp > label { color: #d8a850; }
.cat-amp input[type="range"] { accent-color: #d8a850; }
.cat-lpg > label { color: #c87858; }
.cat-lpg input[type="range"] { accent-color: #c87858; }
.cat-pitch > label { color: #c08858; }
.cat-pitch input[type="range"] { accent-color: #c08858; }
.cat-tuning > label { color: #88a870; }
.cat-tuning input[type="range"] { accent-color: #88a870; }
.cat-delay > label { color: #b83840; }
.cat-delay input[type="range"] { accent-color: #b83840; }
.cat-spatial > label { color: #e8c060; }
.cat-spatial input[type="range"] { accent-color: #e8c060; }

/* --- Buttons --- */
.btn-group button {
  background: #4a3c2a;
  color: #c0a880;
  border-color: #584830;
}
.btn-group button:last-child { border-right-color: #584830; }
.btn-group button.active {
  background: #b82838;
  color: #f0e0c0;
  border-color: #b82838;
}
.cat-filter .btn-group button.active {
  background: #5a8830;
  border-color: #80b850;
}
.cat-amp .btn-group button.active {
  background: #8a6828;
  border-color: #d8a850;
}
.cat-lpg .btn-group button.active {
  background: #884838;
  border-color: #c87858;
}
.cat-shape .btn-group button.active {
  background: #5a8830;
  border-color: #90c860;
}
.btn-group button:not(.active):hover {
  background: #584830;
  color: #d8c8a0;
}

/* --- Focus ring --- */
.btn-group button:focus-visible,
button.chord-btn:focus-visible,
button.prog-btn:focus-visible,
/* .inversion-btn:focus-visible, */
.piano-mode-btn:focus-visible,
.chord-builder-open-btn:focus-visible,
.chord-builder-roots button:focus-visible,
.chord-builder-qualities button:focus-visible,
.chord-builder-actions button:focus-visible,
.preset-section button:focus-visible {
  outline-color: #98d860;
}

/* --- Transpose --- */
.transpose-section {
  background: #3e3225;
}
.transpose-row label {
  color: #b0a080;
}

/* --- Voice Canvases --- */
.voice-canvases canvas {
  background: #1a1408;
  border-color: #584830;
}
canvas#master-visualizer {
  background: #1a1408;
  border-color: #584830;
}

/* --- Chord Buttons --- */
button.chord-btn {
  background: #4a3c2a;
  color: #d8c8a0;
  border-color: #584830;
}
button.chord-btn:hover {
  background: #584830;
  border-color: #6a5838;
}
button.chord-btn:active, button.chord-btn.active {
  background: #b82838;
  border-color: #d83848;
}

/* --- Progression Buttons --- */
.progression-group-label {
  color: #b0a080;
}
button.prog-btn {
  background: #4a3c2a;
  color: #c0a880;
  border-color: #584830;
}
button.prog-btn:hover {
  background: #584830;
  border-color: #6a5838;
}
button.prog-btn.active {
  background: #68903a;
  border-color: #80b850;
  color: #f0e0c0;
}

/* --- Bottom Bar --- */
.bottom-bar {
  background: #281e12;
  border-top-color: #584830;
}

/* --- Inversion Buttons (commented out) ---
.inversion-btn {
  background: #4a3c2a;
  color: #b0a080;
  border-color: #584830;
}
.inversion-btn:hover {
  background: #584830;
  color: #d8c8a0;
}
.inversion-btn:active,
.inversion-btn.active {
  background: #b82838;
  border-color: #d83848;
  color: #f0e0c0;
} */

/* --- Compressor Toggle --- */
.compressor-toggle label {
  color: #b0a080;
}

/* --- Piano Mode --- */
.piano-mode-btn {
  background: #4a3c2a;
  color: #b0a080;
  border-color: #584830;
}
.piano-mode-btn:not(.active):hover {
  background: #584830;
  color: #d8c8a0;
}
.piano-mode-btn.active {
  background: #b82838;
  color: #f0e0c0;
  border-color: #d83848;
}
.harp-range-label {
  color: #b0a080;
}

/* --- Instructions --- */
.instructions {
  background: #3e3225;
}

/* --- Theme Link --- */
.theme-link {
  border-top-color: #584830;
}
.theme-link a {
  color: #90c860;
}

/* --- Chord Builder --- */
.chord-builder-open-btn {
  background: #4a3c2a;
  color: #c0a880;
  border-color: #584830;
}
.chord-builder-open-btn:hover { background: #584830; }
.chord-builder-modal {
  background: rgba(20, 14, 6, 0.8);
}
.chord-builder-panel {
  background: #281e12;
  border-top-color: #584830;
}
.chord-builder-header {
  color: #f0e0c0;
}
.chord-builder-x {
  color: #b0a080;
}
.chord-builder-sequence {
  background: #1a1408;
}
.chord-builder-placeholder {
  color: #807060;
}
.chord-builder-chip {
  background: #68903a;
}
.chord-builder-chip:hover, .chord-builder-chip:active {
  background: #b82838;
}
.chord-builder-section label {
  color: #807060;
}
.chord-builder-roots button,
.chord-builder-qualities button {
  background: #4a3c2a;
  color: #c0a880;
  border-color: #584830;
}
.chord-builder-roots button:hover,
.chord-builder-qualities button:hover {
  background: #584830;
  border-color: #6a5838;
}
.chord-builder-roots button.active {
  background: #b82838;
  border-color: #d83848;
  color: #f0e0c0;
}
.chord-builder-qualities button:active {
  background: #68903a;
  border-color: #80b850;
  color: #f0e0c0;
}
.chord-builder-actions button {
  background: #4a3c2a;
  color: #c0a880;
  border-color: #584830;
}
.chord-builder-actions button:hover {
  background: #584830;
  border-color: #6a5838;
}
.chord-builder-use-btn {
  background: #68903a !important;
  border-color: #80b850 !important;
  color: #f0e0c0 !important;
}
.chord-builder-use-btn:hover {
  background: #78a048 !important;
}

/* --- Preset Section --- */
.preset-btn {
  background: #4a3c2a;
  color: #c0a880;
  border-color: #584830;
}
.preset-btn:hover {
  background: #584830;
  border-color: #6a5838;
}
.preset-status {
  color: #80b850;
}
.midi-status {
  color: #b0a080;
}

/* --- MIDI Mode Toggle --- */
.midi-mode-toggle label {
  color: #b0a080;
}

/* --- Pitch Readouts --- */
.pitch-label {
  color: #807060;
}
.pitch-unit {
  color: #605040;
}

/* --- Synth Preset Select --- */
#synth-preset-select {
  background: #4a3c2a;
  color: #c0a880;
  border-color: #584830;
}
#synth-preset-select:focus {
  outline-color: #98d860;
  border-color: #98d860;
}
#synth-preset-select optgroup {
  color: #90c860;
}
#synth-preset-select option {
  color: #c0a880;
  background: #4a3c2a;
}

/* --- Scrollbar (Webkit) --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #2e2418;
}
::-webkit-scrollbar-thumb {
  background: #584830;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #6a5838;
}