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

    /* Bluish-white layered neutrals */
    --bg-app-hsl: 214 32% 97%;
    --bg-app: hsl(var(--bg-app-hsl));
    --bg-canvas-hsl: 213 38% 94%;
    --bg-canvas: hsl(var(--bg-canvas-hsl));
    --bg-surface-hsl: 210 45% 99.5%;
    --bg-surface: hsl(var(--bg-surface-hsl));
    --bg-elevated-hsl: 214 40% 98%;
    --bg-elevated: hsl(var(--bg-elevated-hsl));
    --bg-hover-hsl: 213 35% 95%;
    --bg-hover: hsl(var(--bg-hover-hsl));
    --bg-active-hsl: 214 72% 96%;
    --bg-active: hsl(var(--bg-active-hsl));

    --text-primary-hsl: 222 35% 13%;
    --text-primary: hsl(var(--text-primary-hsl));
    --text-secondary-hsl: 220 20% 32%;
    --text-secondary: hsl(var(--text-secondary-hsl));
    --text-muted-hsl: 218 14% 44%;
    --text-muted: hsl(var(--text-muted-hsl));
    --text-inverse-hsl: 0 0% 100%;
    --text-inverse: hsl(var(--text-inverse-hsl));

    --border-subtle-hsl: 214 24% 88%;
    --border-subtle: hsl(var(--border-subtle-hsl));
    --border-strong-hsl: 215 22% 78%;
    --border-strong: hsl(var(--border-strong-hsl));
    --border-focus-hsl: 221 83% 51%;
    --border-focus: hsl(var(--border-focus-hsl));

    /* Primary blue + teal accent — pairs with bluish-white chrome */
    --accent-primary-hsl: 221 83% 48%;
    --accent-primary: hsl(var(--accent-primary-hsl));
    --accent-hover-hsl: 221 83% 41%;
    --accent-hover: hsl(var(--accent-hover-hsl));
    --accent-subtle-hsl: 214 100% 96%;
    --accent-subtle: hsl(var(--accent-subtle-hsl));
    --accent-secondary-hsl: 172 58% 36%;
    --accent-secondary: hsl(var(--accent-secondary-hsl));
    --accent-secondary-subtle-hsl: 168 55% 94%;
    --accent-secondary-subtle: hsl(var(--accent-secondary-subtle-hsl));

    --success-hsl: 152 62% 34%;
    --success: hsl(var(--success-hsl));
    --success-subtle-hsl: 150 55% 94%;
    --success-subtle: hsl(var(--success-subtle-hsl));
    --warning-hsl: 34 92% 44%;
    --warning: hsl(var(--warning-hsl));
    --warning-subtle-hsl: 42 100% 95%;
    --warning-subtle: hsl(var(--warning-subtle-hsl));
    --danger-hsl: 356 72% 46%;
    --danger: hsl(var(--danger-hsl));
    --danger-subtle-hsl: 356 100% 97%;
    --danger-subtle: hsl(var(--danger-subtle-hsl));
    --info-hsl: 199 88% 42%;
    --info: hsl(var(--info-hsl));
    --info-subtle-hsl: 198 100% 95%;
    --info-subtle: hsl(var(--info-subtle-hsl));

    --shadow-color-hsl: 230 35% 18%;
    --shadow-color: hsl(var(--shadow-color-hsl));

    --sidebar-bg-hsl: 213 36% 98.5%;
    --sidebar-bg: hsl(var(--sidebar-bg-hsl));
    --sidebar-border-hsl: 214 26% 90%;
    --sidebar-border: hsl(var(--sidebar-border-hsl));
    --topbar-bg-hsl: 212 42% 99.5%;
    --topbar-bg: hsl(var(--topbar-bg-hsl));
    --surface-highlight-hsl: 214 55% 98.5%;
    --surface-highlight: hsl(var(--surface-highlight-hsl));

    --focus-ring: 0 0 0 2px hsl(var(--bg-surface-hsl)), 0 0 0 4px hsl(var(--accent-primary-hsl) / 0.32);
}

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

    --bg-app-hsl: 222 47% 12%;
    --bg-app: hsl(var(--bg-app-hsl));
    --bg-canvas-hsl: 222 50% 9%;
    --bg-canvas: hsl(var(--bg-canvas-hsl));
    --bg-surface-hsl: 222 47% 15%;
    --bg-surface: hsl(var(--bg-surface-hsl));
    --bg-elevated-hsl: 222 35% 21%;
    --bg-elevated: hsl(var(--bg-elevated-hsl));
    --bg-hover-hsl: 222 30% 25%;
    --bg-hover: hsl(var(--bg-hover-hsl));
    --bg-active-hsl: 218 35% 30%;
    --bg-active: hsl(var(--bg-active-hsl));

    --text-primary-hsl: 210 100% 98%;
    --text-primary: hsl(var(--text-primary-hsl));
    --text-secondary-hsl: 215 30% 80%;
    --text-secondary: hsl(var(--text-secondary-hsl));
    --text-muted-hsl: 215 20% 65%;
    --text-muted: hsl(var(--text-muted-hsl));
    --text-inverse-hsl: 222 50% 9%;
    --text-inverse: hsl(var(--text-inverse-hsl));

    --border-subtle-hsl: 222 20% 19%;
    --border-subtle: hsl(var(--border-subtle-hsl));
    --border-strong-hsl: 222 20% 28%;
    --border-strong: hsl(var(--border-strong-hsl));
    --border-focus-hsl: 217 100% 70%;
    --border-focus: hsl(var(--border-focus-hsl));

    --accent-primary-hsl: 217 100% 65%;
    --accent-primary: hsl(var(--accent-primary-hsl));
    --accent-hover-hsl: 217 100% 75%;
    --accent-hover: hsl(var(--accent-hover-hsl));
    --accent-subtle-hsl: 217 40% 30%;
    --accent-subtle: hsl(var(--accent-subtle-hsl));
    --accent-secondary-hsl: 175 100% 40%;
    --accent-secondary: hsl(var(--accent-secondary-hsl));
    --accent-secondary-subtle-hsl: 175 40% 18%;
    --accent-secondary-subtle: hsl(var(--accent-secondary-subtle-hsl));

    --success-hsl: 142 60% 55%;
    --success: hsl(var(--success-hsl));
    --success-subtle-hsl: 142 40% 15%;
    --success-subtle: hsl(var(--success-subtle-hsl));
    --warning-hsl: 38 92% 50%;
    --warning: hsl(var(--warning-hsl));
    --warning-subtle-hsl: 38 40% 15%;
    --warning-subtle: hsl(var(--warning-subtle-hsl));
    --danger-hsl: 0 84% 65%;
    --danger: hsl(var(--danger-hsl));
    --danger-subtle-hsl: 0 40% 15%;
    --danger-subtle: hsl(var(--danger-subtle-hsl));
    --info-hsl: 217 100% 65%;
    --info: hsl(var(--info-hsl));
    --info-subtle-hsl: 217 40% 20%;
    --info-subtle: hsl(var(--info-subtle-hsl));

    --shadow-color-hsl: 222 50% 5%;
    --shadow-color: hsl(var(--shadow-color-hsl));

    --sidebar-bg-hsl: 222 47% 14%;
    --sidebar-bg: hsl(var(--sidebar-bg-hsl));
    --sidebar-border-hsl: 222 20% 19%;
    --sidebar-border: hsl(var(--sidebar-border-hsl));
    --topbar-bg-hsl: 222 47% 14%;
    --topbar-bg: hsl(var(--topbar-bg-hsl));
    --surface-highlight-hsl: 215 30% 26%;
    --surface-highlight: hsl(var(--surface-highlight-hsl));

    --focus-ring: 0 0 0 2px hsl(var(--bg-surface-hsl)), 0 0 0 4px hsl(var(--accent-primary-hsl) / 0.45);
}

/* ── Native <select> dropdown dark-mode fix ─────────────────────────────────
   color-scheme on the root element (above) is what tells the browser to
   render native UI (select popups, scrollbars) in dark mode. The rules
   below add option-level coloring as a belt-and-braces fallback for
   browsers that don't fully honor root color-scheme on native dropdowns. */
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    background-color: hsl(var(--bg-canvas-hsl));
    color: hsl(var(--text-primary-hsl));
}

/* ── Global checkbox & radio accent ─────────────────────────────────────────
   Tailwind Forms plugin replaces native checkbox with `appearance: none` and
   a custom SVG checkmark. The `bg-surface` utility pins the background to a
   LIGHT value that doesn't track dark mode, so the unchecked state appears
   white in dark mode. We override explicitly for dark mode below.

   Checked-state background color is driven by `text-primary` (Tailwind) which
   maps to the brand blue. The white SVG checkmark is already visible on top. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: hsl(var(--accent-primary-hsl));
    cursor: pointer;
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
    color-scheme: dark;
    accent-color: hsl(var(--accent-primary-hsl));
    /* Override Tailwind's bg-surface which is pinned to a light value. */
    /* background-color: hsl(var(--bg-elevated-hsl)) !important; */
    border-color: hsl(var(--border-strong-hsl)) !important;
}

/* When checked, override the background with the brand blue and make the
   white SVG checkmark visible. This wins over Tailwind's text-primary color. */
html[data-theme="dark"] input[type="checkbox"]:checked,
html[data-theme="dark"] input[type="radio"]:checked {
    background-color: hsl(var(--accent-primary-hsl)) !important;
    border-color: hsl(var(--accent-primary-hsl)) !important;
}

/* Light mode: checked state should also clearly show blue + white check */
html[data-theme="light"] input[type="checkbox"]:checked,
html[data-theme="light"] input[type="radio"]:checked {
    background-color: hsl(var(--accent-primary-hsl)) !important;
    border-color: hsl(var(--accent-primary-hsl)) !important;
}