/* InstruMentor — Trombone phase colors + gradients */

:root {
  --phase-setup: #b87333;
  --phase-setup-light: #fdf3e8;
  --phase-setup-border: #d4a06a;
  --phase-foundations: #8b4513;
  --phase-foundations-light: #f7ece3;
  --phase-foundations-border: #c4915e;
  --phase-tone: #2c5f7c;
  --phase-tone-light: #e8f0f6;
  --phase-tone-border: #7baac5;
  --phase-technique: #0b6b5a;
  --phase-technique-light: #e8f8f2;
  --phase-technique-border: #82ccb8;
  --phase-refinement: #6c3483;
  --phase-refinement-light: #f4ecf7;
  --phase-refinement-border: #bb8fce;
  --phase-tools: #1a5276;
  --phase-tools-light: #e8eff5;
  --phase-tools-border: #7fb3d3;
  --phase-reference: #5d6d7e;
  --phase-reference-light: #eef0f2;
  --phase-reference-border: #aab7c4;
}

/* Hero gradient — warm copper/brass tones */
.hero {
  background:
    radial-gradient(circle at 25% 35%, rgba(184,115,51,0.35) 0%, transparent 50%),
    radial-gradient(circle at 75% 65%, rgba(139,69,19,0.3) 0%, transparent 50%),
    conic-gradient(from 180deg at 50% 50%, #0b3d4f, #6b4a1e, #0b3d4f);
}
.hero::after { background: rgba(184,115,51,0.06); }

/* Body background */
body {
  background-image: radial-gradient(circle at 20% 80%, rgba(184,115,51,0.06) 0%, transparent 50%),
                     radial-gradient(circle at 80% 20%, rgba(139,69,19,0.04) 0%, transparent 50%);
}

/* Phase header gradients */
.phase-header.ph-setup { background: linear-gradient(135deg, #8a5522, #b87333); }
.phase-header.ph-foundations { background: linear-gradient(135deg, #6b340f, #8b4513); }
.phase-header.ph-tone { background: linear-gradient(135deg, #1e4558, #2c5f7c); }
.phase-header.ph-technique { background: linear-gradient(135deg, #0b5b4a, #1c8a6c); }
.phase-header.ph-refinement { background: linear-gradient(135deg, #4a235a, #6c3483); }
.phase-header.ph-tools { background: linear-gradient(135deg, #113d56, #1a5276); }
.phase-header.ph-reference { background: linear-gradient(135deg, #3d4d5c, #5d6d7e); }

/* Phase-zone section header coloring */
.phase-setup-zone .section-header.ph-setup { border-left-color: var(--phase-setup); background: linear-gradient(90deg, rgba(184,115,51,0.1), transparent); }
.phase-setup-zone .section-header.ph-setup:hover { background: linear-gradient(90deg, rgba(184,115,51,0.18), rgba(184,115,51,0.03)); }
.phase-foundations-zone .section-header.ph-foundations { border-left-color: var(--phase-foundations); background: linear-gradient(90deg, rgba(139,69,19,0.08), transparent); }
.phase-foundations-zone .section-header.ph-foundations:hover { background: linear-gradient(90deg, rgba(139,69,19,0.15), rgba(139,69,19,0.03)); }
.phase-tone-zone .section-header.ph-tone { border-left-color: var(--phase-tone); background: linear-gradient(90deg, rgba(44,95,124,0.1), transparent); }
.phase-tone-zone .section-header.ph-tone:hover { background: linear-gradient(90deg, rgba(44,95,124,0.18), rgba(44,95,124,0.03)); }
.phase-technique-zone .section-header.ph-technique { border-left-color: var(--phase-technique); background: linear-gradient(90deg, rgba(11,107,90,0.1), transparent); }
.phase-technique-zone .section-header.ph-technique:hover { background: linear-gradient(90deg, rgba(11,107,90,0.18), rgba(11,107,90,0.03)); }
.phase-refinement-zone .section-header.ph-refinement { border-left-color: var(--phase-refinement); background: linear-gradient(90deg, rgba(108,52,131,0.08), transparent); }
.phase-refinement-zone .section-header.ph-refinement:hover { background: linear-gradient(90deg, rgba(108,52,131,0.15), rgba(108,52,131,0.03)); }
.tools-zone .section-header.ph-tools { border-left-color: var(--phase-tools); background: linear-gradient(90deg, rgba(26,82,118,0.1), transparent); }
.tools-zone .section-header.ph-tools:hover { background: linear-gradient(90deg, rgba(26,82,118,0.18), rgba(26,82,118,0.03)); }
.reference-zone .section-header.ph-reference { border-left-color: var(--phase-reference); background: linear-gradient(90deg, rgba(93,109,126,0.08), transparent); }
.reference-zone .section-header.ph-reference:hover { background: linear-gradient(90deg, rgba(93,109,126,0.15), rgba(93,109,126,0.03)); }

/* Instrument badge — trombone copper */
.sidebar-header .instrument-badge {
  background: rgba(184,115,51,0.2); border-color: rgba(184,115,51,0.4); color: #d4a06a;
}