:root {
    color-scheme: dark;
    /* Page background */
    --color-bg: #0c1024;
    /* Big layout areas: header, nav, sidebar */
    --color-layout: #111735;
    /* Cards, panels, modals, tables */
    --color-surface: #171f45;
    /* Raised cards, active panels, elevated sections */
    --color-surface-raised: #1d2858;
    /* Floating overlays, popovers, menus */
    --color-surface-overlay: #25336d;
    /* Inputs, selects, textareas */
    --color-control: #1b2552;
    /* Softer UI background: chips, small panels, subtle grouped items */
    --color-control-soft: #202c60;
    /* Input/select hover */
    --color-control-hover: #2a3978;
    /* Focused input/select/textarea background */
    --color-control-focused: #34458d;
    /* Open select picker / dropdown */
    --color-picker: #121939;
    /* Borders */
    --color-border: #33427d;
    /* Stronger borders, scrollbar thumb, dividers */
    --color-border-strong: #5366b8;
    /* Subtle separators */
    --color-divider: rgb(122 255 255 / 0.12);
    /* Main text */
    --color-text: #dfe9ff;
    /* Secondary text */
    --color-text-soft: #aebde8;
    /* Muted text / placeholders */
    --color-text-muted: #7f8db8;
    /* Disabled UI */
    --color-disabled: #2a3158;
    --color-disabled-text: #7f8db8;
    /* Main action color */
    --color-primary: #73fffe;
    /* Stronger primary color for text, icons, borders, and highlights */
    --color-primary-emphasis: #b8ffff;
    /* Primary filled action text */
    --color-primary-text: #061d26;
    /* Soft primary background: selected option, selected row, badges */
    --color-primary-soft: #1a5f73;
    /* Primary hover */
    --color-primary-hover: #9affff;
    /* Shadows for cards, dropdowns, modals */
    --color-shadow: rgb(3 6 20 / 0.5);
    /* Floating shadows: badges, overlays, floating controls */
    --color-shadow-floating: rgb(3 6 20 / 0.72);
    /* Focus ring / keyboard navigation */
    --color-focus-ring: #73fffe;
    /* Backdrop for dialogs, drawers, menus */
    --color-backdrop: rgb(from var(--color-bg) r g b / 0.5);
    /* Success */
    --color-success: #00ff9d;
    --color-success-soft: #063d2b;
    --color-success-text: #d9fff0;
    /* Warning */
    --color-warning: #fbf665;
    --color-warning-soft: #3e3a0b;
    --color-warning-text: #fffdd1;
    /* Danger */
    --color-danger: #ff4f9a;
    --color-danger-soft: #431027;
    --color-danger-text: #ffe1ef;
    /* Info */
    --color-info: #6287f8;
    --color-info-soft: #172a68;
    --color-info-text: #e3e9ff;
    /* Brand */
    --color-brand: #b66cff;
    --color-brand-soft: #321b5c;
    --color-brand-text: #f3e8ff;
    /* Code / technical blocks */
    --color-code-bg: #101632;
    --color-code-text: #c9fefe;
    /* Layout background accents */
    --color-bg-accent-top-start: rgb(115 255 254 / 0.16);
    --color-bg-accent-top-end: rgb(182 108 255 / 0.14);
    --color-bg-accent-bottom-start: rgb(98 135 248 / 0.13);
    --color-bg-accent-bottom-end: rgb(255 79 154 / 0.10);
    --color-bg-accent-wash: rgb(115 255 254 / 0.035);
    /* Accent badge / small highlighted pill */
    --color-badge-accent: #172a68;
    --color-badge-accent-text: #73fffe;
}