Styling

All variables defined on :root in src/app.css. Dark theme is default; light/print override via media queries.

Dark Theme (Default)

Backgrounds & Surfaces:

Text:

Accents & Status:

Fretboard-Specific:

Overlays (Transparency):

Tag Colors (Shape/Type Indicators): Each tag has 3 vars: color, background, border.

Light Theme

Activated via @media (prefers-color-scheme: light) in src/app.css. No manual toggle — follows OS/browser preference. All variables redefined with warm browns for accents, lighter backgrounds (e.g., --fretboard-bg: #e8d5b7).

Print Theme

@media print overrides in src/app.css:

• White background, black text
• Simplified palette
• .no-print class hides interactive elements

Class Naming Conventions

BEM-like (simplified, no __ or -- modifiers):

• Base: .btn, .chord-grid, .chord-card, .control-group, .tab-bar
• Variants: .btn-primary, .btn-secondary, .btn-small
• State: .active, .disabled, .in-pool, .filled, .moving, .selected
• Responsive: .tablet, .mobile-*
• Utility: .page-root, .scroll-area, .no-print

Common Patterns

Buttons

.btn {
  padding: 8px 16px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

Cards

.chord-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

Form Controls

select, input[type="text"] {
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 16px; /* minimum 16px — prevents iOS Safari auto-zoom on focus */
}

Transitions

• Standard: transition: all 0.2s or transition: color 0.15s
• Used for hover effects and state changes

SVG Coloring

Fretboard and chord diagrams use CSS variables directly in SVG attributes:

<line stroke="var(--fret-color)" />
<circle fill="var(--dot-bg)" />

Global CSS Structure (src/app.css)

Key Rules

1. Always use CSS variables for colors — never hardcode hex values in components
2. Scoped styles in Svelte <style> — global styles only in app.css
3. html2canvas compatibility: For elements captured by html2canvas (PDF export), use inline styles set via JS — html2canvas doesn't reliably read scoped Svelte CSS
4. Border-radius: 6px for controls, 8px for cards
5. Font-weight: 600 for buttons/headings, 400 for body text
6. Fixed-width toggle buttons: Any button whose label changes between states (e.g., "+ Add to pool" / "− Delete from pool") must have min-width set to accommodate the longest label, plus justify-content: center. This prevents layout shift when the text toggles. Example: .voicing-action-btn { min-width: 105px; justify-content: center; }
7. Scrollbar at screen edge: Scroll containers must extend rightward to the viewport edge using margin-right: calc(-1 * var(--scroll-extend)); padding-right: calc(var(--scroll-extend) + Npx). Their ancestor chain must use overflow-y: clip; overflow-x: visible (not overflow: hidden). See the layout skill for the full architecture.