:root {
    /* Colors */
    --color-primary-purple: #b80e80;
    --color-turquoise: #42b8b4;
    --color-light-gray: #dadada;
    --color-yellow: #ffed00;
    --color-orange: #fd7b2c;
    --color-red: #e53e3e;
    
    /* Semantic aliases */
    --color-bg: #e0f2f1;
    --color-surface: #f9fdfd;
    --color-header-bg: var(--color-turquoise);
    --color-header-text: #ffffff;
    --color-primary: var(--color-primary-purple);
    --color-accent: var(--color-turquoise);
    --color-text: #1a1a1a;
    --color-border: #cfd8dc;

    /* Typography */
    --font-family-base: 'Onest', sans-serif;
    
    /* Font Weights */
    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dark Theme Overrides */
html[data-theme="dark"] {
    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-header-bg: #1e1e1e;
    --color-header-text: #e0e0e0;
    --color-text: #e0e0e0;
    --color-border: #333333;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme]), html[data-theme="auto"] {
        --color-bg: #121212;
        --color-surface: #1e1e1e;
        --color-header-bg: #1e1e1e;
        --color-header-text: #e0e0e0;
        --color-text: #e0e0e0;
        --color-border: #333333;
        --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }
}

/* Solarized Osaka — тёмная тема на основе классической палитры Solarized Dark
   (Ethan Schoonover) с акцентами magenta/cyan вместо стандартных бирюзы/фиолетового. */
html[data-theme="solarized_osaka"] {
    --color-bg: #002b36;
    --color-surface: #073642;
    --color-header-bg: #073642;
    --color-header-text: #fdf6e3;
    --color-primary: #d33682;
    --color-accent: #2aa198;
    --color-text: #93a1a1;
    --color-border: #586e75;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Неон — почти чёрный фиолетовый фон, неоново-розовый основной цвет и
   бирюзовый акцент; свечение элементов — в neon.css. */
html[data-theme="neon"] {
    --color-bg: #07060f;
    --color-surface: #100e22;
    --color-header-bg: #0b0a19;
    --color-header-text: #f3eaff;
    --color-primary: #ff2bd6;
    --color-accent: #00f0ff;
    --color-turquoise: #00c8d6;
    --color-text: #e6e3ff;
    --color-border: #2d2660;
    --shadow: 0 0 0 1px rgba(255, 43, 214, 0.08), 0 4px 18px rgba(0, 240, 255, 0.06);
    --neon-pink: #ff2bd6;
    --neon-cyan: #00f0ff;
    --neon-violet: #9d4dff;
}

/* Светлый неон — светлый лавандовый фон, тёмный фиолетовый текст и те же неоновые
   акценты (розовый, бирюзовый, фиолетовый) со свечением; оформление — в neon.css. */
html[data-theme="neon_light"] {
    --color-bg: #f6f2ff;
    --color-surface: #ffffff;
    --color-header-bg: #ffffff;
    --color-header-text: #2a1050;
    --color-primary: #e600b8;
    --color-accent: #00a8c6;
    --color-turquoise: #00a8c6;
    --color-text: #24123f;
    --color-border: #e2d6ff;
    --shadow: 0 0 0 1px rgba(230, 0, 184, 0.06), 0 6px 22px rgba(124, 58, 237, 0.10);
    --neon-pink: #ff2bd6;
    --neon-cyan: #00d8f0;
    --neon-violet: #8b3dff;
}