/* Chord Sheets colors: graphite, mist blue and coral, in dark and light.
   Dark is the default; light follows the device setting unless someone picks a theme. */
:root {
  color-scheme: dark;
  --bg: #1b1e23;
  --panel: #23272d;
  --panel2: #2c3138;
  --hover: #353b44;
  --line: #3a4049;
  --text: #eceef1;
  --muted: #98a1ad;
  --accent: #f2867a;        /* coral: the main action on each screen */
  --on-accent: #1b1e23;
  --mist: #a4c0e2;          /* mist blue: selected things, focus, links */
  --on-mist: #1b1e23;
  --mist-soft: rgba(164, 192, 226, .14);
  --good: #84d3a8;
  --warn: #f2c27b;
  --bad: #f2867a;
  --star: #f2c27b;
  --paper-bg: #343940;
  --shadow: 0 14px 36px rgba(0, 0, 0, .45);
  --hero: radial-gradient(900px 380px at 30% -40%, rgba(164, 192, 226, .26) 0%, transparent 70%),
          radial-gradient(700px 340px at 85% -30%, rgba(242, 134, 122, .20) 0%, transparent 70%);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8;
  --panel: #ffffff;
  --panel2: #edf1f6;
  --hover: #e2e9f1;
  --line: #d5dce5;
  --text: #262a30;
  --muted: #677180;
  --accent: #e0675a;
  --on-accent: #ffffff;
  --mist: #4c78a6;
  --on-mist: #ffffff;
  --mist-soft: #e1eaf5;
  --good: #2e8b57;
  --warn: #b26d12;
  --bad: #cf4a3e;
  --star: #e2a028;
  --paper-bg: #dde3ea;
  --shadow: 0 10px 28px rgba(38, 42, 48, .12);
  --hero: radial-gradient(900px 380px at 30% -40%, rgba(76, 120, 166, .20) 0%, transparent 70%),
          radial-gradient(700px 340px at 85% -30%, rgba(224, 103, 90, .16) 0%, transparent 70%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f3f5f8;
    --panel: #ffffff;
    --panel2: #edf1f6;
    --hover: #e2e9f1;
    --line: #d5dce5;
    --text: #262a30;
    --muted: #677180;
    --accent: #e0675a;
    --on-accent: #ffffff;
    --mist: #4c78a6;
    --on-mist: #ffffff;
    --mist-soft: #e1eaf5;
    --good: #2e8b57;
    --warn: #b26d12;
    --bad: #cf4a3e;
    --star: #e2a028;
    --paper-bg: #dde3ea;
    --shadow: 0 10px 28px rgba(38, 42, 48, .12);
    --hero: radial-gradient(900px 380px at 30% -40%, rgba(76, 120, 166, .20) 0%, transparent 70%),
            radial-gradient(700px 340px at 85% -30%, rgba(224, 103, 90, .16) 0%, transparent 70%);
  }
}
.theme-btn { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; width: 34px; height: 32px; padding: 0; cursor: pointer; font-size: 15px; line-height: 1; }
.theme-btn:hover { border-color: var(--mist); }