@import url('chords-light.css');

.chord-card {
  border-color: var(--border-light, #333638);
  background: var(--bg-surface, #1e1f20);
}

.chord-card h2 {
  color: var(--text-primary, #e3e3e3);
}

.fretboard {
  border: .5px;
  background: #2d3142;
}

.fretboard .fret {
  background: var(--bg-base, #131314) !important;
}

.fret {
  border: .5px solid var(--border, #444746);
  border-left: 2px solid transparent;
  border-right: 2px;
  background: var(--bg-overlay, #282a2c);
  color: transparent;
}

.fret[data-dot]::after {
  background: rgba(138, 180, 248, 0.6);
  border: 1px solid #8ab4f8;
}

.fret:empty {
  background: var(--bg-overlay, #282a2c);
}

.alternatives h3 {
  color: var(--text-secondary, #c4c7c5);
}

.barre-line {
  background: #8ab4f8;
  color: #131314;
}

.fret[muted] {
  color: var(--text-secondary, #c4c7c5);
}