/* =============================================
   ArtMastex user site — theme tokens (light default)
   ============================================= */

:root {
    --color-page-bg: #622adb;
    --color-page-bg-legacy: #7231ff;

    --color-surface: #ffffff;
    --color-surface-raised: #f8f9fa;
    --color-surface-sunken: #eae3fa;

    --color-text: #333333;
    --color-text-secondary: #666666;
    --color-text-muted: #888888;
    --color-text-on-primary: #ffffff;

    --color-primary: #7231ff;
    --color-primary-strong: #7231ff;
    --color-primary-rgb: 114, 49, 255;
    --color-primary-dark: #5a20e0;

    --color-accent: #ffe343;
    --color-accent-dark: #ffc01d;
    --color-on-accent: #1a0f33;

    --color-border: #dee2e6;
    --color-border-subtle: #e9ecef;

    --color-success: #28a745;
    --color-danger: #d32f2f;
    --color-warning: #ffc107;

    --color-success-bg: #e8f5e9;
    --color-danger-bg: #ffebee;
    --color-warning-bg: #fff3cd;

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 14px rgba(114, 49, 255, 0.18);

    --color-bg-light: #e0ddeb;
    --color-bg-violet: #ccb2fa;
    --color-bg-violet-light: #eae3fa;
    --color-bg-violet-medium: #d5c2ff;
    --color-bg-grey: #fafafa;

    --btn-secondary-hover-bg: #f8f4ff;
    --btn-cancel-border: #888888;
    --btn-cancel-color: #888888;
    --btn-cancel-hover-bg: #f8f9fa;
    --btn-clear-bg: #ffe0e0;
    --btn-clear-color: #d32f2f;

    /* Шапка / подвал (glass и solid chrome) */
    --chrome-bar-bg: #622adb;
    --chrome-bar-border: rgba(255, 255, 255, 1);
    --chrome-glass-bg: rgba(255, 255, 255, 0.12);
    --chrome-glass-footer-bg: rgba(255, 255, 255, 0.1);
    --chrome-nav-text: rgba(255, 255, 255, 0.85);
    --chrome-nav-text-hover: #ffffff;
    --chrome-nav-text-muted: rgba(255, 255, 255, 0.45);
    --chrome-nav-hover-bg: rgba(255, 255, 255, 0.08);
    --chrome-nav-active-bg: rgba(255, 255, 255, 0.15);
    --chrome-nav-border-hover: rgba(255, 255, 255, 0.15);
    --chrome-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --chrome-footer-shadow: 0 -4px 30px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --chrome-drawer-backdrop: rgba(0, 0, 0, 0.45);
}

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

    --color-page-bg: #160c2e;
    --color-page-bg-legacy: #160c2e;

    --color-surface: #241640;
    --color-surface-raised: #2e1c52;
    --color-surface-sunken: #1a0f33;

    --color-text: #f3eeff;
    --color-text-secondary: #c4b5e0;
    --color-text-muted: #8e7aad;
    --color-text-on-primary: #ffffff;

    --color-primary: #9b6dff;
    --color-primary-strong: #7231ff;
    --color-primary-rgb: 155, 109, 255;
    --color-primary-dark: #7c4dff;

    --color-accent: #ffe343;
    --color-accent-dark: #ffc01d;
    --color-on-accent: #1a0f33;

    --color-border: rgba(155, 109, 255, 0.28);
    --color-border-subtle: rgba(155, 109, 255, 0.18);

    --color-success: #3ddb7a;
    --color-danger: #f07178;
    --color-warning: #ffe343;

    --color-success-bg: rgba(61, 219, 122, 0.12);
    --color-danger-bg: rgba(240, 113, 120, 0.15);
    --color-warning-bg: rgba(255, 227, 67, 0.12);

    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(155, 109, 255, 0.15);
    --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(155, 109, 255, 0.25);

    --color-bg-light: #2e1c52;
    --color-bg-violet: #3a2860;
    --color-bg-violet-light: #241640;
    --color-bg-violet-medium: #352454;
    --color-bg-grey: #1a0f33;

    --btn-secondary-hover-bg: rgba(155, 109, 255, 0.12);
    --btn-cancel-border: #8e7aad;
    --btn-cancel-color: #8e7aad;
    --btn-cancel-hover-bg: rgba(255, 255, 255, 0.06);
    --btn-clear-bg: rgba(240, 113, 120, 0.15);
    --btn-clear-color: #f07178;

    --chrome-bar-bg: #251540;
    --chrome-bar-border: rgba(155, 109, 255, 0.42);
    --chrome-glass-bg: rgba(37, 21, 64, 0.92);
    --chrome-glass-footer-bg: rgba(37, 21, 64, 0.92);
    --chrome-nav-text: rgba(243, 238, 255, 0.92);
    --chrome-nav-text-hover: #f3eeff;
    --chrome-nav-text-muted: rgba(196, 181, 224, 0.65);
    --chrome-nav-hover-bg: rgba(155, 109, 255, 0.14);
    --chrome-nav-active-bg: rgba(155, 109, 255, 0.22);
    --chrome-nav-border-hover: rgba(155, 109, 255, 0.35);
    --chrome-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(155, 109, 255, 0.2), inset 0 1px 0 rgba(155, 109, 255, 0.1);
    --chrome-footer-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(155, 109, 255, 0.15);
    --chrome-drawer-backdrop: rgba(0, 0, 0, 0.65);
}

/* Autofill in dark theme */
.theme-text-danger {
    color: var(--color-danger);
}

.theme-text-success {
    color: var(--color-success);
}

.theme-notice-warning {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 16px;
    color: var(--color-text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* Тёмный текст на жёлтом / акцентном фоне (обе темы) */
.btn-warning,
.btn-create-product,
.option-button.active,
.option-button.selected,
.badge-layout-action-btn--confirm,
.yellow-title,
.c-c-yellow,
.text-another-services,
.default-badge,
.title-icon {
    color: var(--color-on-accent);
}

.yellow-title :where(p, span, a, li, label, strong, em, small),
.c-c-yellow :where(p, span, a, li, label, strong, em, small),
.text-another-services :where(p, span, a, li, label, strong, em, small) {
    color: inherit;
}

.c-c-yellow .text-white,
.yellow-title .text-white,
.text-another-services.text-white,
.text-another-services .text-white {
    color: var(--color-on-accent) !important;
}

.auth-card .btn-primary,
.auth-page .btn-primary {
    color: var(--color-on-accent);
}

.nav-theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: 0;
}

/* Временно скрыто: переключатель темы на пользовательском сайте */
.nav-theme-toggle,
.nav-drawer__theme {
    display: none !important;
}

.nav-drawer__theme {
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    margin: 0 0 8px;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface-raised) inset;
    box-shadow: 0 0 0 1000px var(--color-surface-raised) inset;
    caret-color: var(--color-text);
    transition: background-color 5000s ease-in-out 0s;
}