/* Global dark theme tokens and overrides. */
/* Deep Forest dark theme. The printable score remains light via the print rules below. */
html[data-theme="dark"] {
   --ink: #f1f4f2;
   --muted: #9ca69f;
   --green: #55b982;
   --dark-green: #327a52;
   --lime: #b8e85c;
   --cream: #121412;
   --surface: #161816;
   --line: #303531;
   --soft: #1d211e;
   --app-bg: #0a0a0a;
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 7px 24px rgba(0, 0, 0, 0.22);
   --shadow-md: 0 18px 55px rgba(0, 0, 0, 0.38);
}
html[data-theme="dark"] body {
   background: radial-gradient(circle at 8% 4%, rgba(85, 185, 130, 0.055), transparent 25rem), var(--app-bg);
}
html[data-theme="dark"] .topbar {
   border-color: rgba(48, 53, 49, 0.92);
   background: rgba(16, 17, 16, 0.96);
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .brand small,
html[data-theme="dark"] .palette-label,
html[data-theme="dark"] .nashville-row-label,
html[data-theme="dark"] .preview-footer {
   color: var(--muted);
}
html[data-theme="dark"] .button-ghost,
html[data-theme="dark"] .icon-button {
   border-color: var(--line);
   background: var(--surface);
   color: var(--ink);
}
html[data-theme="dark"] .button-ghost:hover,
html[data-theme="dark"] .icon-button:hover {
   border-color: #465049;
   background: var(--soft);
}
html[data-theme="dark"] .icon-button:disabled {
   border-color: #292d2a;
   background: #131513;
   color: #666d68;
}
html[data-theme="dark"] .button-primary {
   color: #08130d;
}
html[data-theme="dark"] .button-primary:hover {
   background: #6dcc98;
}
html[data-theme="dark"] .ribbon-workspace .editor-card {
   border-color: var(--line);
   background: rgba(22, 24, 22, 0.98);
}
html[data-theme="dark"] .ribbon-tab:hover,
html[data-theme="dark"] .ribbon-tab.active,
html[data-theme="dark"] .section-title:hover,
html[data-theme="dark"] .text-button:hover,
html[data-theme="dark"] .section-menu summary:hover,
html[data-theme="dark"] .section-menu[open] summary {
   background: var(--soft);
   color: var(--ink);
}
html[data-theme="dark"] .ribbon-panel .palette-group,
html[data-theme="dark"] .palette-group,
html[data-theme="dark"] .nashville-selected-card {
   border-color: var(--line);
   background: #151715;
}
html[data-theme="dark"] .text-input,
html[data-theme="dark"] .select-input,
html[data-theme="dark"] .lyrics-input,
html[data-theme="dark"] .preview-inline-input,
html[data-theme="dark"] .section-title-input,
html[data-theme="dark"] .chord-root-picker .key,
html[data-theme="dark"] .nashville-key,
html[data-theme="dark"] .nashville-accidental {
   border-color: var(--line);
   background: #101110;
   color: var(--ink);
}
html[data-theme="dark"] .auto-syllable-input {
   border-color: var(--line);
   background: #101110;
   color: var(--ink);
}
html[data-theme="dark"] .chord-root-picker .key:hover,
html[data-theme="dark"] .nashville-key:hover,
html[data-theme="dark"] .nashville-accidental:hover {
   border-color: #55b982;
   background: #1d211e;
   color: #f1f4f2;
}
html[data-theme="dark"] .chord-root-picker .key.active,
html[data-theme="dark"] .nashville-key.active,
html[data-theme="dark"] .nashville-accidental.active {
   border-color: var(--green);
   background: var(--green);
   color: #08130d;
}
html[data-theme="dark"] .nashville-accidentals {
   border-color: var(--line);
   background: #0f100f;
}
html[data-theme="dark"] .nashville-panel-divider,
html[data-theme="dark"] .palette-divider {
   background: var(--line);
}
html[data-theme="dark"] .chord,
html[data-theme="dark"] .chord-family .chord,
html[data-theme="dark"] .nashville-chord,
html[data-theme="dark"] .slash-chord,
html[data-theme="dark"] .custom-chord,
html[data-theme="dark"] .duration-option {
   border-color: #3a403b;
   background: var(--soft) !important;
   color: var(--ink);
}
html[data-theme="dark"] .chord:hover,
html[data-theme="dark"] .duration-option:hover {
   border-color: var(--green);
   background: #252b26 !important;
   color: #f1f4f2;
}
html[data-theme="dark"] .chord.palette-selected,
html[data-theme="dark"] .duration-option.palette-selected {
   border-color: var(--green);
   background: #203b2b !important;
   box-shadow: 0 0 0 3px rgba(85, 185, 130, 0.16);
}
html[data-theme="dark"] .preview-stage {
   border: 0;
   background: transparent;
   box-shadow: none;
}
html[data-theme="dark"] .preview-viewport {
   scrollbar-color: #454b46 transparent;
}
html[data-theme="dark"] .preview-viewport::-webkit-scrollbar-thumb {
   border-color: #0d0e0d;
   background: #454b46;
}
html[data-theme="dark"] .preview-stage .preview-card {
   border-color: var(--line);
   background: var(--cream);
   color: var(--ink);
}
html[data-theme="dark"] .preview-editable:hover {
   background: rgba(85, 185, 130, 0.12);
   box-shadow: 0 0 0 4px rgba(85, 185, 130, 0.12);
}
html[data-theme="dark"] .preview-section {
   border-bottom-color: var(--line);
}
html[data-theme="dark"] .preview-section.is-active .section-tools,
html[data-theme="dark"] .preview-section:hover .section-tools,
html[data-theme="dark"] .preview-section:focus-within .section-tools {
   border-color: var(--line);
   background: rgba(22, 24, 22, 0.94);
}
html[data-theme="dark"] .section-menu-popover {
   border-color: var(--line);
   background: var(--surface);
   box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}
html[data-theme="dark"] .delete-section,
html[data-theme="dark"] .delete-bar {
   color: #f07c76;
}
html[data-theme="dark"] .delete-section:hover,
html[data-theme="dark"] .delete-bar:hover {
   background: #3b2423;
}
html[data-theme="dark"] .delete-bar {
   border-color: #63403d;
   background: rgba(22, 24, 22, 0.96);
}
html[data-theme="dark"] .bar-batch {
   border-color: #3d433e;
}
html[data-theme="dark"] .bar {
   border-color: var(--ink);
}
html[data-theme="dark"] .beat-dot {
   color: #9fb0a6;
}
html[data-theme="dark"] .placed-chord,
html[data-theme="dark"] .sub-beat .placed-chord {
   background: #203b2b;
   color: #d9f5e3;
}
/* Color only the drawn marker lines — never the expanded touch hit-area. */
html[data-theme="dark"] .duration-line,
html[data-theme="dark"] .nested-duration-line {
   background: transparent !important;
   box-shadow: none !important;
}
html[data-theme="dark"] .duration-line::before,
html[data-theme="dark"] .duration-line::after,
html[data-theme="dark"] .nested-duration-line::before {
   background: var(--green);
}
html[data-theme="dark"] .lyric-input {
   border-color: #343a35;
   background: rgba(10, 10, 10, 0.82);
   color: var(--ink);
}
html[data-theme="dark"] .lyric-input:hover,
html[data-theme="dark"] .lyric-input:focus {
   background: #0a0a0a;
}
html[data-theme="dark"] .section-lyrics-toggle {
   border-color: var(--line);
   background: #151715;
   color: var(--muted);
}
html[data-theme="dark"] .section-chord-above-toggle {
   border-color: var(--line);
   background: #151715;
   color: var(--muted);
}
html[data-theme="dark"] .section-lyrics-toggle span {
   background: #303531;
}
html[data-theme="dark"] .section-chord-above-toggle span {
   background: #303531;
}
html[data-theme="dark"] .section-lyrics-toggle.active {
   border-color: #327a52;
   background: #1b3022;
   color: #6dcc98;
}
html[data-theme="dark"] .section-chord-above-toggle.active {
   border-color: #327a52;
   background: #1b3022;
   color: #6dcc98;
}
html[data-theme="dark"] .section-lyrics-toggle.active span {
   background: var(--green);
   color: #08130d;
}
html[data-theme="dark"] .section-chord-above-toggle.active span {
   background: var(--green);
   color: #08130d;
}
html[data-theme="dark"] .lyrics-shortcuts kbd {
   border-color: var(--line);
   background: #101110;
   color: var(--ink);
}
html[data-theme="dark"] .scroll-affordance {
   border-color: var(--line);
   background: rgba(22, 24, 22, 0.95);
}
html[data-theme="dark"] .site-footer {
   border-color: var(--line);
   background: linear-gradient(180deg, rgba(22, 24, 22, 0.4), rgba(10, 10, 10, 0.97));
}