/**
 * Dark Theme - Color Variable Overrides
 *
 * Applied via [data-theme="dark"] attribute on :root
 * Overrides base.css theme variables for dark mode
 */

[data-theme="dark"] {
    /* ===== Theme Color Overrides ===== */
    --bg: #121417;
    --card: #1f2226;
    --ink: #ffffff;
    --border: #2a2e33;
    --blue: #66b2ff;
    --button-bg: var(--blue);
    --button-ink: var(--card);
    --success: #2ea043;

    /* ===== Canvas Theme Colors (RGB) ===== */
    --doc-color: 0, 0, 0;
    --margin-color: 255, 0, 0;
    --printable-color: 255, 0, 255;
    --score-color: var(--printable-color);
    --line-color: 255, 255, 255;
}

/* ===== Selection Colors ===== */
[data-theme="dark"] ::selection {
    background: var(--blue);
    color: var(--card);
}

/* ===== Scrollbar Styling ===== */
[data-theme="dark"] {
    scrollbar-color: var(--border) var(--card);
}

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--card);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-sm);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--blue);
}