/* InstruMentor — Shared design tokens (Casa Batlló palette) */
:root {
  /* — Casa Batlló Palette — */
  --primary: #0b3d4f;
  --primary-mid: #1c7a8c;
  --accent: #d4af37;
  --accent-light: #fdf8e8;
  --bg: #f0f9ff;
  --card: rgba(255, 255, 255, 0.85);
  --text: #0a2a35;
  --text-light: #3d6b7a;
  --border: #b8dce6;
  --section-bg: #e6f4f8;
  --callout-bg: rgba(118, 215, 196, 0.08);
  --callout-border-key: #d4af37;
  --callout-border-warn: #c0392b;
  --callout-border-tip: #1c7a8c;
  --intonation-sharp: #fdf0f0;
  --intonation-sharp-border: #c0392b;
  --intonation-flat: #e8f4fb;
  --intonation-flat-border: #2980b9;
  --field-bg: #dff0f5;
  --field-border: #1c7a8c;
  /* — Instrument family palette — */
  --family-woodwind: #2980b9;
  --family-woodwind-light: #e8f4fb;
  --family-woodwind-mid: #85c1e9;
  --family-brass: #d4af37;
  --family-brass-light: #fdf8e8;
  --family-brass-mid: #e8d68a;
  --family-percussion: #c0392b;
  --family-percussion-light: #fbeae8;
  --family-percussion-mid: #e8a090;
  --family-strings: #0b6b5a;
  --family-strings-light: #e8f8f2;
  --family-strings-mid: #82ccb8;
  /* — Type tokens: Casa Batlló Set — */
  --font-sans: 'Brandon Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
  --font-display: 'Brandon Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Heldane Display', Georgia, 'Times New Roman', serif;
  --lh-body: 1.35;
  --lh-heading: 1.1;
  --lh-subheading: 1.15;
  --text-iron: #2F2F2F;
  /* — Spacing scale (4-point grid) — */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  /* — Component geometry (organic, curved — Casa Batlló) — */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --border-rule: 1px solid var(--border);
  --border-accent: 6px solid;
  --skeletal-radius: 30% 70% 70% 30% / 50% 30% 70% 50%;
  /* — Interactive Tools phase (shared across instruments) — */
  --phase-tools: #6b4c9a;
  --phase-tools-light: #f3eefa;
  --phase-tools-border: #b299d1;
}

/* — Dark mode — respects system preference — */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #76d7c4;
    --primary-mid: #1c7a8c;
    --accent: #e8d68a;
    --accent-light: #2a2518;
    --bg: #0a1215;
    --card: rgba(20, 40, 50, 0.85);
    --text: #e0eff4;
    --text-light: #9cbac8;
    --border: #1e4a5a;
    --section-bg: #0f2830;
    --callout-bg: rgba(118, 215, 196, 0.06);
    --callout-border-key: #e8d68a;
    --callout-border-warn: #e57373;
    --callout-border-tip: #4dd0c8;
    --intonation-sharp: #2a1515;
    --intonation-sharp-border: #e57373;
    --intonation-flat: #0f2535;
    --intonation-flat-border: #5dade2;
    --field-bg: #0f2830;
    --field-border: #1c7a8c;
    --text-iron: #d8e8f0;
    --family-woodwind-light: #0f2535;
    --family-brass-light: #2a2518;
    --family-percussion-light: #2a1515;
    --family-strings-light: #0f2820;
    --phase-tools-light: #1a1228;
  }
  body {
    background-image: radial-gradient(circle at 20% 80%, rgba(118,215,196,0.04) 0%, transparent 50%),
                       radial-gradient(circle at 80% 20%, rgba(93,173,226,0.03) 0%, transparent 50%);
  }
  .sidebar {
    background: linear-gradient(180deg, #071e28 0%, #0f3040 100%);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
  }
  .sidebar-header { border-bottom-color: rgba(118,215,196,0.15); }
  .hero { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); }
  .section-header {
    background: linear-gradient(90deg, rgba(118,215,196,0.08), transparent);
    box-shadow: 0 2px 0 rgba(0,0,0,0.15);
  }
  .section-header:hover { background: linear-gradient(90deg, rgba(118,215,196,0.15), rgba(118,215,196,0.03)); }
  .callout { box-shadow: 0 3px 0 rgba(0,0,0,0.1), 0 1px 10px rgba(0,0,0,0.15); }
  .phase-nav a {
    background: var(--card); border-color: var(--border); color: var(--text);
  }
  .phase-nav a:hover { background: rgba(118,215,196,0.1); }
  .breadcrumb ol { background: var(--card); border-color: var(--border); }
  .expand-controls button { background: var(--card); }
  img { opacity: 0.9; }
}