/* InstruMentor — Violin phase colors + gradients */

:root {
  --phase-setup: #d4af37;
  --phase-setup-light: #fdf8e8;
  --phase-setup-border: #e8d68a;
  --phase-foundations: #0b6b5a;
  --phase-foundations-light: #e8f8f2;
  --phase-foundations-border: #82ccb8;
  --phase-tone: #8b5e3c;
  --phase-tone-light: #f5ede6;
  --phase-tone-border: #c4a07a;
  --phase-technique: #1c7a8c;
  --phase-technique-light: #e6f4f8;
  --phase-technique-border: #76d7c4;
  --phase-refinement: #6c3483;
  --phase-refinement-light: #f4ecf7;
  --phase-refinement-border: #bb8fce;
  --phase-reference: #455a64;
  --phase-reference-light: #eceff1;
  --phase-reference-border: #90a4ae;
}

/* Hero gradient */
.hero {
  background:
    radial-gradient(circle at 20% 30%, rgba(11,107,90,0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139,94,60,0.3) 0%, transparent 50%),
    conic-gradient(from 180deg at 50% 50%, #0a2e24, #0b6b5a, #0a2e24);
}
.hero::after { background: rgba(130,204,184,0.06); }

/* Body background */
body {
  background-image: radial-gradient(circle at 20% 80%, rgba(11,107,90,0.08) 0%, transparent 50%),
                     radial-gradient(circle at 80% 20%, rgba(139,94,60,0.06) 0%, transparent 50%);
}

/* Phase header gradients */
.phase-header.ph-setup { background: linear-gradient(135deg, #7a6520, #a08830); }
.phase-header.ph-foundations { background: linear-gradient(135deg, #084d3f, #0b6b5a); }
.phase-header.ph-tone { background: linear-gradient(135deg, #6b4530, #8b5e3c); }
.phase-header.ph-technique { background: linear-gradient(135deg, #145a6a, #1c7a8c); }
.phase-header.ph-refinement { background: linear-gradient(135deg, #4a235a, #6c3483); }
.phase-header.ph-reference { background: linear-gradient(135deg, #37474f, #455a64); }

/* Phase-zone section header coloring */
.phase-setup-zone .section-header { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(212,175,55,0.1), transparent); }
.phase-setup-zone .section-header:hover { background: linear-gradient(90deg, rgba(212,175,55,0.18), rgba(212,175,55,0.03)); }
.phase-foundations-zone .section-header { border-left-color: #0b6b5a; background: linear-gradient(90deg, rgba(11,107,90,0.1), transparent); }
.phase-foundations-zone .section-header:hover { background: linear-gradient(90deg, rgba(11,107,90,0.18), rgba(11,107,90,0.03)); }
.phase-tone-zone .section-header { border-left-color: #8b5e3c; background: linear-gradient(90deg, rgba(139,94,60,0.1), transparent); }
.phase-tone-zone .section-header:hover { background: linear-gradient(90deg, rgba(139,94,60,0.18), rgba(139,94,60,0.03)); }
.phase-technique-zone .section-header { border-left-color: #1c7a8c; background: linear-gradient(90deg, rgba(28,122,140,0.1), transparent); }
.phase-technique-zone .section-header:hover { background: linear-gradient(90deg, rgba(28,122,140,0.18), rgba(28,122,140,0.03)); }
.phase-refinement-zone .section-header { border-left-color: var(--phase-refinement); background: linear-gradient(90deg, rgba(108,52,131,0.08), transparent); }
.phase-refinement-zone .section-header:hover { background: linear-gradient(90deg, rgba(108,52,131,0.15), rgba(108,52,131,0.03)); }
.phase-reference-zone .section-header { border-left-color: #455a64; background: linear-gradient(90deg, rgba(69,90,100,0.08), transparent); }
.phase-reference-zone .section-header:hover { background: linear-gradient(90deg, rgba(69,90,100,0.15), rgba(69,90,100,0.03)); }

/* Instrument badge */
.sidebar-header .instrument-badge {
  background: rgba(11,107,90,0.2); border-color: rgba(11,107,90,0.4); color: #82ccb8;
}