:root {
    /* Фоны */
    --color-bg: #eef4ff;
    --color-surface: #ffffff;
    --color-surface-soft: #f5f9ff;

    /* Границы */
    --color-border: #d7e4fb;
    --color-border-strong: #bfd3f6;

    /* Текст */
    --color-text: #14284b;
    --color-text-soft: #6980a8;
    --color-text-inverse: #ffffff;

    /* Основной акцент */
    --color-primary: #2f7cf6;
    --color-primary-hover: #1f69df;
    --color-primary-active: #1657c0;
    --color-primary-contrast: #ffffff;

    /* Мягкие акценты */
    --color-accent: #8fb7ff;
    --color-accent-soft: #eaf2ff;

    /* Состояния */
    --color-success-bg: #eaf8ef;
    --color-success-border: #bfe5cb;
    --color-success-text: #1f6b3a;

    --color-error-bg: #fff1f3;
    --color-error-border: #f3c7cf;
    --color-error-text: #9f2940;

    /* Размеры layout */
    --header-height: 76px;
    --footer-height: 64px;
    --sidebar-width: 280px;

    /* Радиусы */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 26px;

    /* Тени */
    --shadow-soft: 0 10px 30px rgba(47, 124, 246, 0.10);
    --shadow-card: 0 18px 45px rgba(47, 124, 246, 0.12);
    --shadow-focus: 0 0 0 4px rgba(47, 124, 246, 0.12);

    /* Скроллбар */
    --scrollbar-size: 8px;
    --scrollbar-track: #e8eef8;
    --scrollbar-thumb: #a9b9d3;
    --scrollbar-thumb-hover: #8fa6cb;
    --scrollbar-thumb-active: #6f8fc0;

    /* Декоративный фон */
    --pattern-opacity: 0;
    --pattern-size: 88px;
    --pattern-color: rgba(47, 124, 246, 0.09);
    --pattern-image: none;

    /* SVG-паттерны */
    --pattern-heart-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Ctext x=%2250%25%22 y=%2252%25%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22 font-size=%2224%22 font-family=%22Arial,sans-serif%22 fill=%22rgba(47,124,246,0.18)%22%3E%E2%99%A1%3C/text%3E%3C/svg%3E');
    --pattern-star-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Ctext x=%2250%25%22 y=%2252%25%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22 font-size=%2222%22 font-family=%22Arial,sans-serif%22 fill=%22rgba(47,124,246,0.18)%22%3E%E2%98%85%3C/text%3E%3C/svg%3E');
}

html[data-theme="dark-blue"] {
    --color-bg: #0f172a;
    --color-surface: #162033;
    --color-surface-soft: #1b2740;

    --color-border: #243454;
    --color-border-strong: #31476e;

    --color-text: #e8eefc;
    --color-text-soft: #9fb1d3;
    --color-text-inverse: #ffffff;

    --color-primary: #5aa2ff;
    --color-primary-hover: #3f8df5;
    --color-primary-active: #2d79e8;
    --color-primary-contrast: #ffffff;

    --color-accent: #7fb3ff;
    --color-accent-soft: #213251;

    --color-success-bg: #103223;
    --color-success-border: #1c5a3d;
    --color-success-text: #86d3a3;

    --color-error-bg: #3a1820;
    --color-error-border: #6b2b38;
    --color-error-text: #ffb3c0;

    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28);
    --shadow-card: 0 18px 45px rgba(0, 0, 0, 0.34);
    --shadow-focus: 0 0 0 4px rgba(90, 162, 255, 0.18);

    --scrollbar-track: #1b2740;
    --scrollbar-thumb: #425b86;
    --scrollbar-thumb-hover: #5473a8;
    --scrollbar-thumb-active: #6a8dcb;

    --pattern-color: rgba(255, 255, 255, 0.09);

    --pattern-heart-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Ctext x=%2250%25%22 y=%2252%25%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22 font-size=%2224%22 font-family=%22Arial,sans-serif%22 fill=%22rgba(255,255,255,0.20)%22%3E%E2%99%A1%3C/text%3E%3C/svg%3E');
    --pattern-star-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Ctext x=%2250%25%22 y=%2252%25%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22 font-size=%2222%22 font-family=%22Arial,sans-serif%22 fill=%22rgba(255,255,255,0.20)%22%3E%E2%98%85%3C/text%3E%3C/svg%3E');
}

/* Без фона */
html:not([data-pattern]),
html[data-pattern="none"] {
    --pattern-opacity: 0;
    --pattern-image: none;
}

/* Точки */
html[data-pattern="dots"] {
    --pattern-opacity: 1;
    --pattern-size: 86px;
    --pattern-image:
            radial-gradient(circle, var(--pattern-color) 0 4px, transparent 5px);
}

/* Сердечки */
html[data-pattern="hearts"] {
    --pattern-opacity: 1;
    --pattern-size: 92px;
    --pattern-image: var(--pattern-heart-image);
}

/* Звёздочки */
html[data-pattern="stars"] {
    --pattern-opacity: 1;
    --pattern-size: 92px;
    --pattern-image: var(--pattern-star-image);
}