/* Elwiz's colour themes. Every page loads this first; components use these roles instead of fixed colours.
   wwwroot/js/theme.js sets data-theme on the html element to light or dark (following the device until the visitor picks one). */

:root {
    color-scheme: light;

    /* The page and what sits on it */
    --page: #f9f9f7;
    --surface: #fcfcfb;
    --surface-raised: #ffffff;
    --control-track: #efeee9;
    --text-primary: #0b0b0b;
    --text-secondary: #52514e;
    --text-muted: #898781;
    --gridline: #e1e0d9;
    --axis: #c3c2b7;
    --border: rgba(11, 11, 11, 0.10);
    --raised-shadow: 0 1px 2px rgba(11, 11, 11, 0.12);
    --link: #0071c1;
    --focus-ring: #258cfb;

    /* Prices: the series accent and the four bands (green, yellow, orange, red); "now" marks the current slot */
    --series-1: #2a78d6;
    --on-series: #ffffff;
    --price-low: #2f9e57;
    --price-low-now: #1a6b37;
    --price-mid: #e0a91a;
    --price-mid-now: #9c6f00;
    --price-higher: #e8772e;
    --price-higher-now: #a8501a;
    --price-high: #d64545;
    --price-high-now: #962424;
    --negative-hatch: rgba(255, 255, 255, 0.55);
    --hover-wash: rgba(42, 120, 214, 0.07);
    --good-text: #006300;
    --good-wash: rgba(47, 158, 87, 0.14);
    --bad-text: #b42b2b;
    --bad-wash: rgba(214, 69, 69, 0.12);

    /* What a price is made of */
    --part-spot: #2a78d6;
    --part-grid: #8a5cd6;
    --part-energinet: #1f9e9e;
    --part-tax: #8c8a82;
    --part-vat: #c4508f;

    /* Account pages */
    --manage-ink: #14112e;
    --manage-muted: #5f5b72;
    --manage-border: rgba(20, 17, 46, 0.10);
    --manage-surface: #ffffff;
    --manage-wash: #f6f5fb;
    --manage-page: #fcfcfb;
    --manage-shadow: rgba(20, 17, 46, 0.25);
    --manage-good: #16794a;
    --manage-good-bg: #e7f6ee;
    --manage-warn: #8a5a00;
    --manage-warn-bg: #fff4d6;
    --manage-bad: #b42b2b;
    --manage-bad-bg: #fdecec;
    --manage-violet: #3b0764;
    --manage-violet-bg: #ede9fe;
    --manage-blue: #1d4ed8;
    --manage-blue-bg: #dbeafe;
    --manage-amber: #92400e;
    --manage-amber-bg: #fef3c7;
    --manage-accent-ring: #7c3aed;
    --manage-button: #1e1452;
    --manage-button-hover: #3a0647;
    --manage-button-text: #ffffff;
    --region-code: linear-gradient(120deg, #0b2463 0%, #7c3aed 100%);

    /* Sign-in card */
    --auth-card: #ffffff;
    --auth-ink: #1f2937;
    --auth-heading: #111827;
    --auth-muted: #6b7280;
    --auth-faint: #9ca3af;
    --auth-line: #e5e7eb;
    --auth-field: #f9fafb;
    --auth-field-focus: #ffffff;
    --auth-hover: #f3f4f6;
    --auth-link: #6d28d9;
    --auth-secondary-text: #4c1d95;
    --auth-secondary-hover-text: #3b0764;
    --auth-secondary-bg: #f5f3ff;
    --auth-secondary-hover-bg: #ede9fe;
    --auth-secondary-border: #ddd6fe;
    --auth-secondary-hover-border: #c4b5fd;
    --auth-alert-bg: #fef2f2;
    --auth-alert-border: #fecaca;
    --auth-alert-text: #b91c1c;
}

/* Dark: a deep indigo night under the same purple and gold as the side menu */
:root[data-theme="dark"] {
    color-scheme: dark;

    --page: #0d0b1d;
    --surface: #161330;
    --surface-raised: #302a5c;
    --control-track: #181530;
    --text-primary: #f2f0fb;
    --text-secondary: #b8b3d3;
    --text-muted: #8c87aa;
    --gridline: #29244a;
    --axis: #3e3866;
    --border: rgba(255, 255, 255, 0.09);
    --raised-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    --link: #8ab8ff;
    --focus-ring: #8ab8ff;

    --series-1: #6aa5f5;
    --on-series: #0b1020;
    /* Brighter bands, so they glow against the night; the current slot gets the brightest shade */
    --price-low: #3dbb6c;
    --price-low-now: #7ee3a2;
    --price-mid: #e9b62c;
    --price-mid-now: #ffd766;
    --price-higher: #f0883f;
    --price-higher-now: #ffae73;
    --price-high: #e85c5c;
    --price-high-now: #ff8f8f;
    --negative-hatch: rgba(13, 11, 29, 0.6);
    --hover-wash: rgba(106, 165, 245, 0.12);
    --good-text: #7ee3a2;
    --good-wash: rgba(61, 187, 108, 0.18);
    --bad-text: #ff9b9b;
    --bad-wash: rgba(232, 92, 92, 0.18);

    --part-spot: #6aa5f5;
    --part-grid: #a98af2;
    --part-energinet: #3cc6c6;
    --part-tax: #908ba9;
    --part-vat: #e486b8;

    --manage-ink: #f2f0fb;
    --manage-muted: #a9a4c6;
    --manage-border: rgba(255, 255, 255, 0.09);
    --manage-surface: #161330;
    --manage-wash: #1e1a3c;
    --manage-page: #0d0b1d;
    --manage-shadow: rgba(0, 0, 0, 0.7);
    --manage-good: #7ee3a2;
    --manage-good-bg: rgba(61, 187, 108, 0.16);
    --manage-warn: #fcd34d;
    --manage-warn-bg: rgba(250, 204, 21, 0.13);
    --manage-bad: #ff9b9b;
    --manage-bad-bg: rgba(232, 92, 92, 0.16);
    --manage-violet: #c9b8ff;
    --manage-violet-bg: rgba(139, 92, 246, 0.2);
    --manage-blue: #9cc5ff;
    --manage-blue-bg: rgba(59, 130, 246, 0.2);
    --manage-amber: #fcd34d;
    --manage-amber-bg: rgba(245, 158, 11, 0.16);
    --manage-accent-ring: #a78bfa;
    --manage-button: #6d28d9;
    --manage-button-hover: #7c3aed;
    --manage-button-text: #ffffff;
    --region-code: linear-gradient(120deg, #8ab8ff 0%, #c9b8ff 100%);

    --auth-card: #161330;
    --auth-ink: #e7e4f5;
    --auth-heading: #f7f5ff;
    --auth-muted: #a9a4c6;
    --auth-faint: #7f7a9e;
    --auth-line: #2c2750;
    --auth-field: #0f0d23;
    --auth-field-focus: #120f2a;
    --auth-hover: #221e42;
    --auth-link: #c4b0ff;
    --auth-secondary-text: #ddd2ff;
    --auth-secondary-hover-text: #ffffff;
    --auth-secondary-bg: rgba(139, 92, 246, 0.14);
    --auth-secondary-hover-bg: rgba(139, 92, 246, 0.24);
    --auth-secondary-border: rgba(167, 139, 250, 0.3);
    --auth-secondary-hover-border: rgba(167, 139, 250, 0.5);
    --auth-alert-bg: rgba(232, 92, 92, 0.12);
    --auth-alert-border: rgba(232, 92, 92, 0.35);
    --auth-alert-text: #ff9b9b;
}

/* Bootstrap's own dark mode, tuned to the same night (forms and tables on the account pages) */
:root[data-bs-theme="dark"] {
    --bs-body-bg: #0d0b1d;
    --bs-body-bg-rgb: 13, 11, 29;
    --bs-body-color: #e7e4f5;
    --bs-body-color-rgb: 231, 228, 245;
    --bs-secondary-bg: #1e1a3c;
    --bs-tertiary-bg: #161330;
    --bs-secondary-color: rgba(231, 228, 245, 0.7);
    --bs-border-color: #2f2a55;
    --bs-emphasis-color: #ffffff;
    --bs-link-color: #8ab8ff;
    --bs-link-color-rgb: 138, 184, 255;
    --bs-link-hover-color: #b5d1ff;
    --bs-link-hover-color-rgb: 181, 209, 255;
}

body {
    background-color: var(--page);
    color: var(--text-primary);
}

/* A soft cross-fade while switching, not on every hover */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    .theme-switching,
    .theme-switching * {
        transition: none !important;
    }
}