:root {
    color-scheme: light dark;
    /* Page background */
    --color-bg: light-dark(#f6f9ff, #030814);
    /* Big layout areas: header, nav, sidebar */
    --color-layout: light-dark(#ffffff, #07111f);
    /* Cards, panels, modals, tables */
    --color-surface: light-dark(#ffffff, #0b1628);
    /* Inputs, selects, textareas */
    --color-control: light-dark(#edf4ff, #101d31);
    /* Softer UI background: chips, small panels, subtle grouped items */
    --color-control-soft: light-dark(#f1f6ff, #13233a);
    /* Input/select hover */
    --color-control-hover: light-dark(#d8e8ff, #172641);
    /* Focused input/select/textarea background */
    --color-control-focused: light-dark(#ffffff, #1b2b48);
    /* Open select picker / dropdown */
    --color-picker: light-dark(#ffffff, #081120);
    /* Borders */
    --color-border: light-dark(#bfd1ea, #24405f);
    /* Stronger borders, scrollbar thumb, dividers */
    --color-border-strong: light-dark(#8fa9ca, #355a82);
    /* Main text */
    --color-text: light-dark(#0b1220, #f8fbff);
    /* Secondary text */
    --color-text-soft: light-dark(#3f5168, #c7d3e3);
    /* Muted text / placeholders */
    --color-text-muted: light-dark(#6b7f99, #8798b0);
    /* Main action color */
    --color-primary: light-dark(#2563eb, #2f66ff);
    /* Stronger primary color for text, icons, borders, and highlights */
    --color-primary-emphasis: light-dark(#1d4ed8, #8fb4ff);
    /* Primary filled action text */
    --color-primary-text: light-dark(#ffffff, #ffffff);
    /* Soft primary background: selected option, selected row, badges */
    --color-primary-soft: light-dark(#dbeafe, #0d2a66);
    /* Primary hover */
    --color-primary-hover: light-dark(#1d4ed8, #3f78ff);
    /* Shadows for cards, dropdowns, modals */
    --color-shadow: light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.42));
    /* Floating shadows: badges, overlays, floating controls */
    --color-shadow-floating: light-dark(rgb(15 23 42 / 0.24), rgb(0 0 0 / 0.62));
    /* Focus ring / keyboard navigation */
    --color-focus-ring: light-dark(#2563eb, #4c85ff);
    /* Backdrop for dialogs, drawers, menus */
    --color-backdrop: light-dark(rgb(15 23 42 / 0.45), rgb(0 0 0 / 0.72));
    /* Success */
    --color-success: light-dark(#15803d, #4ade80);
    /* Warning */
    --color-warning: light-dark(#b45309, #fbbf24);
    /* Danger */
    --color-danger: light-dark(#dc2626, #fb7185);
    /* Brand */
    --color-brand: light-dark(#1e3a8a, #7aa2ff);
    --color-brand-soft: light-dark(#eaf2ff, #071a3d);
    --color-brand-text: light-dark(#ffffff, #07111f);
    /* Layout background accents */
    --color-bg-accent-top-start: light-dark(rgb(37 99 235 / 0.24), rgb(59 130 246 / 0.16));
    --color-bg-accent-top-end: light-dark(rgb(6 182 212 / 0.20), rgb(34 211 238 / 0.12));
    --color-bg-accent-bottom-start: light-dark(rgb(14 165 233 / 0.18), rgb(34 211 238 / 0.08));
    --color-bg-accent-bottom-end: light-dark(rgb(59 130 246 / 0.20), rgb(59 130 246 / 0.10));
    --color-bg-accent-wash: light-dark(rgb(255 255 255 / 0.25), rgb(0 0 0 / 0.08));
    /* Accent badge / small highlighted pill */
    --color-badge-accent: light-dark(#dbeafe, #0d1e3f);
    --color-badge-accent-text: light-dark(#2563eb, #7aa2ff);
}

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

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

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