:root {
    color-scheme: light dark;
    /* Page background */
    --color-bg: light-dark(#f8fafc, #0b1120);
    /* Big layout areas: header, nav, sidebar */
    --color-layout: light-dark(#ffffff, #111827);
    /* Cards, panels, modals, tables */
    --color-surface: light-dark(#ffffff, #182235);
    /* Inputs, selects, textareas */
    --color-control: light-dark(#f8fafc, #1e293b);
    /* Input/select hover */
    --color-control-hover: light-dark(#f1f5f9, #2b3648);
    /* Open select picker / dropdown */
    --color-picker: light-dark(#ffffff, #0f172a);
    /* Borders */
    --color-border: light-dark(#d8e0ea, #334155);
    /* Stronger borders, scrollbar thumb, dividers */
    --color-border-strong: light-dark(#b8c4d3, #475569);
    /* Main text */
    --color-text: light-dark(#0f172a, #f8fafc);
    /* Secondary text */
    --color-text-soft: light-dark(#475569, #cbd5e1);
    /* Muted text / placeholders */
    --color-text-muted: light-dark(#64748b, #94a3b8);
    /* Main action color */
    --color-primary: light-dark(#2563eb, #60a5fa);
    /* Soft primary background: selected option, selected row, badges */
    --color-primary-soft: light-dark(#dbeafe, #1e3a8a);
    /* Primary hover */
    --color-primary-hover: light-dark(#1d4ed8, #93c5fd);
    /* Shadows for cards, dropdowns, modals */
    --color-shadow: light-dark(rgb(15 23 42 / 0.12), rgb(0 0 0 / 0.35));
    /* Success */
    --color-success: light-dark(#16a34a, #22c55e);
    /* Warning */
    --color-warning: light-dark(#d97706, #f59e0b);
    /* Danger */
    --color-danger: light-dark(#dc2626, #f87171);
    /*skalio*/
    --color-skalio: darkorange;
}

html:has(select[id="theme-select"] option[value="system"]:checked) {
    color-scheme: light dark;
}

html:has(select[id="theme-select"] option[value="light"]:checked) {
    color-scheme: light;
}

html:has(select[id="theme-select"] option[value="dark"]:checked) {
    color-scheme: dark;
}