/* tokens.css — Bundled faces, the theme variables every other sheet reads, and the
   reset. Loaded first everywhere — including the chords verifier's Done
   preview, which pairs it with grid.css and nothing else.

   Cut from the single style.css on 2026-08-02. The <link> order in
   index.html IS the cascade order these were split at; reordering the
   tags changes which rule wins. */

/* Grilles Displayer — themes, layout, chord grid, chord symbols. */

/* Saira Extra Condensed (Google Fonts), bundled locally so file:// works
   offline. Trial replacement for Barlow Condensed — the barlow-condensed-*.woff2
   files are kept in fonts/ so switching back is just a family-name swap. */
@font-face {
  font-family: "Saira Extra Condensed";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/saira-extra-condensed-400.woff2") format("woff2");
}

@font-face {
  font-family: "Saira Extra Condensed";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/saira-extra-condensed-500.woff2") format("woff2");
}

@font-face {
  font-family: "Saira Extra Condensed";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/saira-extra-condensed-700.woff2") format("woff2");
}

/* Music glyphs ♭ ♮ ♯ Δ ø ° — a 2 KB subset of Finale Engraver (SIL OFL,
   renamed per the license; see fonts/OFL-engraver.txt), glyphs normalized to
   Bravura Text metrics and rebuilt by tools/build_chord_glyphs_font.py.
   Saira has none of these (its text ø reads as a plain o at chord sizes),
   so they used to fall back to the device's symbol font with unpredictable
   metrics. The unicode-range gate means this face only ever serves these
   six glyphs; letters fall through to Saira. (Titles use the same stack —
   fine while no tune title contains a text ø or °, which the corpus
   doesn't.) */
@font-face {
  font-family: "Grille Chord Glyphs";
  font-style: normal;
  font-weight: 100 900;
  src: url("../fonts/chord-glyphs.woff2") format("woff2");
  unicode-range: U+00B0, U+00F8, U+0394, U+266D-266F;
}

:root {
  /* The condensed face for titles and chord symbols, music glyphs first
     (unicode-range keeps them from claiming anything else). */
  --font-cond: "Grille Chord Glyphs", "Saira Extra Condensed", "Arial Narrow",
    "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #0b0b0d;
  --panel: #16161a;
  --fg: #f4f4f6;
  --muted: #9a9aa2;
  --line: #e8e8ec;
  --border: #2a2a30;
  --accent: #3d6ba3;
  --ok: #4cae5a; /* digitized-asset icons */
  --icon-off: #5c5c64; /* scan-only asset icons */
  --accent-ink: #86aede; /* key chip, legible on dark panel */
  --mod-ink: #d6a24c; /* section-key (modulation) chip */
  --chip-bg: #1e1e24;
  --panel2: #1e1e24; /* raised surface: segmented controls, keys, cards */
  --hit: #ffd479; /* matched-bar highlight (Find) */
  --loop: #d8a13f; /* loop bracket on the grid, loop band on the form strip */
}

:root[data-theme="light"] {
  --bg: #faf9f5;
  --panel: #efede6;
  --fg: #141414;
  --muted: #6b6b66;
  --line: #141414;
  --border: #d8d5ca;
  --accent: #9db8d6;
  --ok: #2e8540;
  --icon-off: #b0ada2;
  --accent-ink: #3d6ba3; /* key chip, legible on light panel */
  --mod-ink: #9a6b12; /* section-key (modulation) chip */
  --chip-bg: #e7e4db;
  --panel2: #e7e4db;
  --hit: #b0680a;
  --loop: #9a6b12;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  /* UI chrome uses Inter where available, falling back to the platform sans.
     Titles and chord symbols use the bundled condensed face (Saira Extra
     Condensed on trial, formerly Barlow Condensed). */
  font-family: "Inter", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}