:root {
    --text-primary: #121212;
    --border-color: #eaeaea; /* stone-300 */
    --toggle-off-bg: #e8e8e8;
    --toggle-off-border: #c9c9c9;
    --toggle-off-knob: #c9c9c9;
    --preset-active-color: #121212;
}

.preset-active {
    color: var(--preset-active-color) !important;
}

[data-theme="dark"] {
    --text-primary: #E0E0E0;
    --preset-active-color: #e8e8e8;
    --border-color: #374151; /* gray-700 */
    --mimoja-blue-v2: #415996;
    --mimoja-blue: #292c38;
    --low-contrast-white: #959595;
    --dark-gray: #101217;
    --green: #0CA581;
    --button-grey: #101115;
    --toggle-off-bg: #2a2a2e;
    --toggle-off-border: #4a4a52;
    --toggle-off-knob: #5a5a64;
}

[data-theme="dark"] body {
    background-color: #101217;
    color: #E8E8E8;
}

[data-theme="dark"] header {
    background-color: #17191e;
    border-bottom-color: black;
}

[data-theme="dark"] aside {
    background-color: #181a21;
    border-right-color: black;
}

/* Profile editor: delete-step / insert-step icon buttons — neutral grey in dark mode */
[data-theme="dark"] .pe-step-action-btn {
    color: #959595;
}

[data-theme="dark"] aside [role="separator"] {
    border-color: black;
}

[data-theme="dark"] #shot-history-panel,
[data-theme="dark"] #shot-data-panel {
    border-color: black;
}

/* GHC column: match shot-history-panel border, recolor buttons + icons for dark mode */
[data-theme="dark"] #ghc-controls {
    border-left-color: black;
}

[data-theme="dark"] #ghc-controls button:not(#ghc-stop-btn) {
    background-color: #6576A0;
}

[data-theme="dark"] #ghc-controls button img {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] #ghc-controls button:not(#ghc-stop-btn) span {
    color: white;
}

[data-theme="dark"] footer {
    background-color: #101117;
    border-top-color: black;
}

[data-theme="dark"] .btn-outline {
    border-color: var(--mimoja-blue-v2);
    color: var(--mimoja-blue-v2);
}

[data-theme="dark"] .btn {
    background-color: #292c38;
    color: white;
}

[data-theme="dark"] .btn:hover {
    background-color: #415996;
}

[data-theme="dark"] #sleep-button, [data-theme="dark"] .settings-button {
    background-color: #101117;
    color: white;
}

[data-theme="dark"] #confirm-profile-btn,
[data-theme="dark"] #editor-save-btn {
    background-color: #385a92;
    color: white;
}

/* Themed scrollbars app-wide in dark mode */
[data-theme="dark"] {
    scrollbar-color: #4a4a52 transparent; /* thumb, track — Firefox + Chromium 121+; inherits to descendants */
}
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: transparent;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #4a4a52;
    border-radius: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #5a5a64;
}