/* ==========================================================================
   GuitarMind Web Portal — style.css
   Dark theme · Saffron accent · Eau Sans (headings) + Montserrat (body)
   ========================================================================== */

/* ── Local Font Declarations ───────────────────────────────────────────── */
@font-face {
  font-family: 'Eau Sans';
  src: url('../assets/fonts/eau_sans_book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Eau Sans';
  src: url('../assets/fonts/eau_sans_bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Custom Properties ──────────────────────────────────────────────────── */
:root {
  /* ── Core Palette (canonical, Dark-First) ────────────────────────────── */
  --background:        #0f0901;                            /* deep earthy charcoal      */
  --surface:           oklch(0.16 0.01 75.12); /* #100D09  sidebar & UI containers   */
  --foreground:        #F8F8F8;                 /* base text white                    */
  --primary:           #E69420;                 /*          signature Saffron         */
  --muted:             oklch(0.25 0.01 67.37); /* #25211D  borders & disabled states */

  /* ── Chart / Interval Palette ───────────────────────────────────────── */
  --chart-1:           #e69420;  /* Root     — Soft Red      */
  --chart-2:           #63a375;  /* 3rd      — Sage Green    */
  --chart-3:           #5c8bb0;  /* 5th      — Steel Blue    */
  --chart-4:           #9d7fb3;  /* 7th      — Muted Purple  */
  --chart-5:           #E69420;  /* Saffron  — Sec. Accent   */

  /* ── Guitar Hardware ────────────────────────────────────────────────── */
  --fret-string-color: oklch(0.70 0.01 67.37); /* #A39E98  metallic silver-grey      */
  --note-active-glow:  rgba(230, 148, 32, 0.4);

  /* ── Typography — Eau Sans: h1 h2 h3 .navbar__brand cards · Montserrat: all else ── */
  --font-heading:      'Eau Sans', sans-serif;
  --font:              'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --radius-sm:         6px;
  --radius-md:         12px;
  --radius-lg:         20px;
  --sidebar-width:     300px;
  --topbar-height:     70px;
  --navbar-height:     70px;
  --transition:        0.18s ease;

  /* ── Text opacity scale (all derived from #F8F8F8) ─────────────────────── */
  --clr-text:           rgba(248, 248, 248, 0.85); /* primary   — headings, brand, active */
  --clr-text-secondary: rgba(248, 248, 248, 0.60); /* secondary — descriptions, nav       */
  --clr-text-muted:     rgba(248, 248, 248, 0.35); /* muted     — hints, captions         */

  /* ── Colour aliases ──────────────────────────────────────────────────── */
  --clr-bg:             var(--background);
  --clr-surface:        var(--surface);
  --clr-surface-raised: var(--background);
  --clr-border:         var(--muted);
  --clr-border-focus:   var(--primary);
  --clr-saffron:        var(--primary);
  --clr-saffron-muted:  #C07A18;
  --clr-saffron-border: rgba(230, 148, 32, 0.22);
  --clr-saffron-glow:   rgba(230, 148, 32, 0.12);
  /* Hero “Guitar Fretboard” + navbar “Guitar Mind” — hue 25 → 40 */
  --brand-heading-gradient: linear-gradient(
    90deg,
    hsl(25 78% 54%) 0%,
    hsl(40 78% 58%) 100%
  );
  --clr-note-text:      var(--background);
  --clr-note-fill:      var(--primary);
  --clr-note-border:    #F0A830;
  --clr-note-glow:      var(--note-active-glow);
  /* Wrong / error notes (fretboard, quiz, landing demo) */
  --clr-note-wrong:      #ba0404;
  --clr-note-wrong-glow: rgba(186, 4, 4, 0.22);
  --clr-fb-wood:        var(--background);
  --clr-fb-fret:        var(--fret-string-color);
  --clr-fb-nut:         #9A8850;
  --clr-fb-string-wound:#8A7858;
  --clr-fb-string-plain:var(--fret-string-color);
  --clr-fb-dot:         #2A2210;
  --fw-bold:            700;
}