/* InstruMentor — Clarinet phase colors + gradients */

:root {
  --phase-startup: #d4af37;
  --phase-startup-light: #fdf8e8;
  --phase-startup-border: #e8d68a;
  --phase-foundations: #2a9d8f;
  --phase-foundations-light: #e8f8f2;
  --phase-foundations-border: #82ccb8;
  --phase-tone: #e76f51;
  --phase-tone-light: #ffe8e0;
  --phase-tone-border: #f0a896;
  --phase-artic: #264653;
  --phase-artic-light: #e8f0f3;
  --phase-artic-border: #7a9cb5;
  --phase-technical: #6b4c9a;
  --phase-technical-light: #f4ecf7;
  --phase-technical-border: #bb8fce;
  --phase-exercises: #457b9d;
  --phase-exercises-light: #e8f1f7;
  --phase-exercises-border: #8fb3d5;
  --phase-reference: #7c7c7c;
  --phase-reference-light: #f0f0f0;
  --phase-reference-border: #b8b8b8;
  /* Clarinet overrides */
  --callout-border-tip: #264653;
  --field-border: #264653;
  --family-woodwind: #2a9d8f;
  --family-woodwind-light: #e8f8f2;
}

/* Hero gradient */
.hero {
  background:
    radial-gradient(circle at 20% 30%, rgba(42,157,143,0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(231,111,81,0.3) 0%, transparent 50%),
    conic-gradient(from 180deg at 50% 50%, #1a3a42, #264653, #1a3a42);
}
.hero::after { background: rgba(231,111,81,0.06); }
.hero h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.15), 0 0 20px rgba(42,157,143,0.15); }
.hero .subtitle { color: rgba(42,157,143,0.9); }

/* Body background */
body {
  background-image: radial-gradient(circle at 20% 80%, rgba(42,157,143,0.08) 0%, transparent 50%),
                     radial-gradient(circle at 80% 20%, rgba(231,111,81,0.06) 0%, transparent 50%);
}

/* Phase header gradients */
.phase-header.ph-startup { background: linear-gradient(135deg, #7a6520, #a08830); }
.phase-header.ph-foundations { background: linear-gradient(135deg, #1f7a73, #2a9d8f); }
.phase-header.ph-tone { background: linear-gradient(135deg, #d45a3f, #e76f51); }
.phase-header.ph-artic { background: linear-gradient(135deg, #1a2e38, #264653); }
.phase-header.ph-technical { background: linear-gradient(135deg, #4a235a, #6b4c9a); }
.phase-header.ph-exercises { background: linear-gradient(135deg, #2d5470, #457b9d); }
.phase-header.ph-reference { background: linear-gradient(135deg, #5a5a5a, #7c7c7c); }

/* Phase-zone section header coloring */
.phase-startup-zone .section-header { border-left-color: var(--phase-startup); background: linear-gradient(90deg, rgba(212,175,55,0.1), transparent); }
.phase-startup-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: var(--phase-foundations); background: linear-gradient(90deg, rgba(42,157,143,0.1), transparent); }
.phase-foundations-zone .section-header:hover { background: linear-gradient(90deg, rgba(42,157,143,0.18), rgba(42,157,143,0.03)); }
.phase-tone-zone .section-header { border-left-color: var(--phase-tone); background: linear-gradient(90deg, rgba(231,111,81,0.1), transparent); }
.phase-tone-zone .section-header:hover { background: linear-gradient(90deg, rgba(231,111,81,0.18), rgba(231,111,81,0.03)); }
.phase-artic-zone .section-header { border-left-color: var(--phase-artic); background: linear-gradient(90deg, rgba(38,70,83,0.1), transparent); }
.phase-artic-zone .section-header:hover { background: linear-gradient(90deg, rgba(38,70,83,0.18), rgba(38,70,83,0.03)); }
.phase-technical-zone .section-header { border-left-color: var(--phase-technical); background: linear-gradient(90deg, rgba(107,76,154,0.1), transparent); }
.phase-technical-zone .section-header:hover { background: linear-gradient(90deg, rgba(107,76,154,0.18), rgba(107,76,154,0.03)); }
.phase-exercises-zone .section-header { border-left-color: var(--phase-exercises); background: linear-gradient(90deg, rgba(69,123,157,0.1), transparent); }
.phase-exercises-zone .section-header:hover { background: linear-gradient(90deg, rgba(69,123,157,0.18), rgba(69,123,157,0.03)); }
.phase-reference-zone .section-header { border-left-color: var(--phase-reference); background: linear-gradient(90deg, rgba(124,124,124,0.1), transparent); }
.phase-reference-zone .section-header:hover { background: linear-gradient(90deg, rgba(124,124,124,0.18), rgba(124,124,124,0.03)); }

/* Sidebar tweaks for clarinet color accents */
.sidebar { box-shadow: 10px 0 30px rgba(26, 58, 66, 0.25); }
.sidebar-header { border-bottom-color: rgba(42,157,143,0.2); }
.sidebar-header .instrument-badge {
  background: rgba(42,157,143,0.2); border-color: rgba(42,157,143,0.4); color: #85d6c8;
}
.nav-section-title { color: rgba(42,157,143,0.7); }
.nav-links a.active { background: rgba(42,157,143,0.1); }
.back-link { border-bottom-color: rgba(42,157,143,0.15); }

/* Clarinet callout tip uses its own accent */
.callout.tip { border-color: var(--phase-foundations); background: rgba(42,157,143,0.06); }
.callout.tip .callout-label { color: var(--phase-foundations); }

/* Vine gradient for progress bar uses clarinet colors */
.progress-bar { background: rgba(26,58,66,0.08); }