/*
 * Leo Paint theme tokens.
 *
 * Every colour in app.css comes from these custom properties. ThemeState writes the effective theme to
 * <html data-theme="dark|light">; index.html sets it before Blazor boots to avoid a flash. If neither has
 * run yet, the prefers-color-scheme fallback below picks the right palette.
 */

:root,
:root[data-theme="light"] {
    color-scheme: light;

    --bg-app: #f3f3f3;
    --bg-workspace: #d9dde3;
    --bg-panel: rgba(250, 250, 250, 0.94);
    --bg-panel-solid: #fafafa;
    --bg-panel-title: #ececec;
    --bg-menu: #f9f9f9;
    --bg-menu-hover: #e5e5e5;
    --bg-input: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.06);
    --bg-active: rgba(0, 103, 192, 0.14);
    --bg-selected: #cce4f7;
    --bg-modal-backdrop: rgba(0, 0, 0, 0.28);

    --border-color: #d0d0d0;
    --border-strong: #b4b4b4;
    --text-primary: #1b1b1b;
    --text-secondary: #5c5c5c;
    --text-disabled: #a0a0a0;
    --accent: #0067c0;
    --accent-text: #ffffff;
    --focus-ring: #0067c0;

    --canvas-checkerboard-a: #ffffff;
    --canvas-checkerboard-b: #cccccc;
    --canvas-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    --panel-shadow: 0 6px 24px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    --panel-idle-opacity: 0.88;
    --histogram-bg: #f4f4f4;
    --histogram-blend: multiply;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Dark palette */
    --bg-app: #202020;
    --bg-workspace: #161616;
    --bg-panel: rgba(43, 43, 43, 0.92);
    --bg-panel-solid: #2b2b2b;
    --bg-panel-title: #333333;
    --bg-menu: #2b2b2b;
    --bg-menu-hover: #3d3d3d;
    --bg-input: #1f1f1f;
    --bg-hover: rgba(255, 255, 255, 0.07);
    --bg-active: rgba(96, 205, 255, 0.16);
    --bg-selected: #0f4a74;
    --bg-modal-backdrop: rgba(0, 0, 0, 0.5);

    --border-color: #3d3d3d;
    --border-strong: #555555;
    --text-primary: #f2f2f2;
    --text-secondary: #ababab;
    --text-disabled: #6b6b6b;
    --accent: #60cdff;
    --accent-text: #00243a;
    --focus-ring: #60cdff;

    --canvas-checkerboard-a: #ffffff;
    --canvas-checkerboard-b: #cccccc;
    --canvas-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
    --panel-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --panel-idle-opacity: 0.85;
    --histogram-bg: #161616;
    --histogram-blend: screen;
}

/* Before any script has set data-theme, follow the OS. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --bg-app: #202020;
        --bg-workspace: #161616;
        --text-primary: #f2f2f2;
        --text-secondary: #ababab;
        --accent: #60cdff;
        --border-color: #3d3d3d;
    }
}