/*
    Colour tokens: the only place in the app where colours are written.
    Everything else (app.css, *.razor.css, markup) uses var(--ml-…).
    theme.js sets data-bs-theme="light" | "dark" on <html> before the first paint; Bootstrap 5.3
    themes its own components from the same attribute, and its variables are mapped to ours below.

    Text pairs are checked for WCAG AA (4.5:1) and chart lines for 3:1 by ThemeContrastTests.
    The categorical series use the validated dataviz palette (light and dark steps); the light
    steps below 3:1 are relieved by the legend, distinct marker shapes and the data table.
*/

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

    /* Surfaces and text */
    --ml-bg: #dfe4ea;
    --ml-surface: #ffffff;
    --ml-surface-2: #eef1f5;
    --ml-border: #e3e8ef;
    --ml-border-strong: #c4ccd8;
    --ml-text: #1e293b;
    --ml-text-muted: #526175;
    --ml-shadow: rgba(15, 23, 42, 0.08);
    --ml-backdrop: rgba(15, 23, 42, 0.45);
    --ml-focus: #258cfb;

    /* Primary / links */
    --ml-primary: #2563eb;
    --ml-primary-strong: #1d4ed8;
    --ml-on-primary: #ffffff;
    --ml-link: #1d4ed8;
    --ml-accent-soft: #e0e9ff;
    --ml-accent-soft-text: #1d4ed8;
    --ml-pressed: #475569;
    --ml-on-pressed: #ffffff;

    /* Status: success / warning / danger / neutral (always shown with a text label) */
    --ml-ok-bg: #e7f6ec;
    --ml-ok-text: #17663a;
    --ml-ok-border: #b9e3c7;
    --ml-warn-bg: #fff5e0;
    --ml-warn-text: #7a4f00;
    --ml-warn-border: #f2d9a6;
    --ml-bad-bg: #fdecec;
    --ml-bad-text: #a12525;
    --ml-bad-border: #f3c0c0;
    --ml-neutral-bg: #eef1f5;
    --ml-neutral-text: #475569;
    --ml-neutral-border: #d9dee6;
    --ml-success-text: #17663a;
    --ml-danger-text: #b42318;
    --ml-info-text: #0b5c8f;
    --ml-danger-solid: #b42318;
    --ml-on-danger: #ffffff;
    --ml-stale-bg: #fff7f7;
    --ml-demo-bg: #ffedd5;
    --ml-demo-text: #7c2d12;
    --ml-demo-border: #fdba74;
    --ml-private-bg: #f3e8ff;
    --ml-private-text: #6b21a8;
    --ml-private-border: #d8b4fe;
    --ml-error-ui-bg: #fff8c5;
    --ml-error-ui-text: #3d3500;

    /* Movement (always with ▲ ▼ = and text) */
    --ml-up: #17663a;
    --ml-down: #a12525;
    --ml-flat: #475569;
    --ml-none: #5b6b80;

    /* Sidebar (dark in both themes) */
    --ml-sidebar-bg: #0f172a;
    --ml-sidebar-text: #cbd5e1;
    --ml-sidebar-text-strong: #ffffff;
    --ml-sidebar-muted: #8b9ab0;
    --ml-sidebar-border: rgba(255, 255, 255, 0.08);
    --ml-sidebar-hover: rgba(255, 255, 255, 0.06);
    --ml-sidebar-active: rgba(255, 255, 255, 0.1);

    /* Charts */
    --ml-chart-current: #2563eb;
    --ml-chart-previous: #1e3a8a;
    --ml-chart-other: #7b8798;
    --ml-chart-grid: #e3e8ef;
    --ml-series-1: #2a78d6;
    --ml-series-2: #eb6834;
    --ml-series-3: #1baf7a;
    --ml-series-4: #eda100;
    --ml-series-5: #e87ba4;
    --ml-series-6: #8a5cd1;
    --ml-series-7: #1597b0;
    --ml-series-8: #a8682f;
    --ml-series-9: #7d8f1f;
    --ml-series-10: #b8406a;
    --ml-live: #16a34a;

    /* Audience map: sequential steps (few to many users), "no users recorded", city bubbles */
    --ml-map-1: #e3ecf9;
    --ml-map-2: #b9d0f0;
    --ml-map-3: #82ace3;
    --ml-map-4: #4b83cf;
    --ml-map-5: #2259a8;
    --ml-map-none: #eef0f3;
    --ml-map-border: #ffffff;
    --ml-map-bubble: #eb6834;
    --ml-map-bubble-border: #8f3410;
    --ml-map-home: #d9c7a0;
}

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

    --ml-bg: #1b2943;
    --ml-surface: #141c2b;
    --ml-surface-2: #1d283c;
    --ml-border: #2c3a52;
    --ml-border-strong: #42526d;
    --ml-text: #e2e8f0;
    --ml-text-muted: #a3b1c6;
    --ml-shadow: rgba(0, 0, 0, 0.5);
    --ml-backdrop: rgba(0, 0, 0, 0.6);
    --ml-focus: #60a5fa;

    --ml-primary: #2563eb;
    --ml-primary-strong: #1d4ed8;
    --ml-on-primary: #ffffff;
    --ml-link: #8ab4ff;
    --ml-accent-soft: #1e3a6e;
    --ml-accent-soft-text: #c7d8ff;
    --ml-pressed: #cbd5e1;
    --ml-on-pressed: #0b1220;

    --ml-ok-bg: #10301f;
    --ml-ok-text: #86efac;
    --ml-ok-border: #1f5136;
    --ml-warn-bg: #33270b;
    --ml-warn-text: #fcd34d;
    --ml-warn-border: #5c4613;
    --ml-bad-bg: #3b1717;
    --ml-bad-text: #fca5a5;
    --ml-bad-border: #6b2727;
    --ml-neutral-bg: #1d283c;
    --ml-neutral-text: #cbd5e1;
    --ml-neutral-border: #334155;
    --ml-success-text: #86efac;
    --ml-danger-text: #fca5a5;
    --ml-info-text: #7dd3fc;
    --ml-danger-solid: #c42b1c;
    --ml-on-danger: #ffffff;
    --ml-stale-bg: #24151a;
    --ml-demo-bg: #3b1d0b;
    --ml-demo-text: #fdba74;
    --ml-demo-border: #7c3a12;
    --ml-private-bg: #2e1a47;
    --ml-private-text: #e9d5ff;
    --ml-private-border: #553379;
    --ml-error-ui-bg: #3a3410;
    --ml-error-ui-text: #fef3c7;

    --ml-up: #86efac;
    --ml-down: #fca5a5;
    --ml-flat: #cbd5e1;
    --ml-none: #a3b1c6;

    --ml-sidebar-bg: #0a101c;
    --ml-sidebar-text: #cbd5e1;
    --ml-sidebar-text-strong: #ffffff;
    --ml-sidebar-muted: #8b9ab0;
    --ml-sidebar-border: rgba(255, 255, 255, 0.08);
    --ml-sidebar-hover: rgba(255, 255, 255, 0.06);
    --ml-sidebar-active: rgba(255, 255, 255, 0.1);

    --ml-chart-current: #60a5fa;
    --ml-chart-previous: #f1f5f9;
    --ml-chart-other: #8391a8;
    --ml-chart-grid: #2c3a52;
    --ml-series-1: #3987e5;
    --ml-series-2: #d95926;
    --ml-series-3: #199e70;
    --ml-series-4: #c98500;
    --ml-series-5: #d55181;
    --ml-series-6: #a283e6;
    --ml-series-7: #22aecb;
    --ml-series-8: #c4864d;
    --ml-series-9: #99ad35;
    --ml-series-10: #e0628f;
    --ml-live: #22c55e;

    --ml-map-1: #1b2a40;
    --ml-map-2: #1f3d66;
    --ml-map-3: #285a99;
    --ml-map-4: #3b7dd1;
    --ml-map-5: #7fb2f2;
    --ml-map-none: #1a2130;
    --ml-map-border: #0b1220;
    --ml-map-bubble: #f08a5d;
    --ml-map-bubble-border: #ffd7c4;
    --ml-map-home: #6b5a36;
}

/* Bootstrap reads its own variables; point them at ours so its components match both themes. */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-body-bg: var(--ml-bg);
    --bs-body-color: var(--ml-text);
    --bs-emphasis-color: var(--ml-text);
    --bs-secondary-color: var(--ml-text-muted);
    --bs-secondary-bg: var(--ml-surface-2);
    --bs-tertiary-bg: var(--ml-surface-2);
    --bs-border-color: var(--ml-border);
    --bs-link-color: var(--ml-link);
    --bs-link-hover-color: var(--ml-link);
    --bs-focus-ring-color: var(--ml-focus);
    --bs-code-color: var(--ml-text);
}