/* ==========================================================================
   Guitar Mind 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;
}

/* Montserrat (variable 100-900), self-hosted — SIL Open Font License, see fonts/montserrat/OFL.txt.
   Served from our own domain so no visitor IP reaches Google Fonts. */
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat/montserrat-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat/montserrat-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── 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.5);  /* ~5:1 contrast, WCAG AA; 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%
  );
  --brand-heading-gradient-elliptical: radial-gradient(
    ellipse 90% 100% at 50% 45%,
    hsl(40 78% 58%) 0%,
    hsl(25 78% 54%) 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;
}