:root {
    color-scheme: light;
    --color-bg: #ffffff;

    --color-text: #1f2937;
    --color-text-light: #6b7280;

    --color-primary: #2563eb;
    --color-success: #10b981;

    --color-dark: #0f172a;
    --color-dark-light: #1e293b;

    --radius-lg: 14px;
    --radius-pill: 999px;

    --transition-fast: 0.2s ease;
}

/* Светлые fallback сохраняют исходную палитру отдельных компонентов. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #111827;
    --color-text: #E8EDF5;
    --color-text-light: #ACB8CA;
    --color-primary: #82B3FF;
    --color-dark: #1B2535;
    --color-dark-light: #243146;
    --theme-page: #111827;
    --theme-panel: #1B2535;
    --theme-raised: #243146;
    --theme-input: #243146;
    --theme-text: #E8EDF5;
    --theme-muted: #ACB8CA;
    --theme-border: #44536A;
    --theme-link: #82B3FF;
    --theme-focus: #82B3FF;
    --theme-hover: #2D3B51;
    --theme-selected: #2A3C58;
    --theme-overlay: rgba(0, 0, 0, 0.72);
    --theme-shadow-rgb: 0, 0, 0;
    --theme-panel-translucent: rgba(27, 37, 53, 0.95);
    --theme-panel-transparent: rgba(27, 37, 53, 0);
    --theme-danger: #FF9FA9;
    --theme-danger-bg: #462833;
    --theme-danger-border: #9E5363;
    --theme-success: #79DEC0;
    --theme-success-bg: #203E3A;
    --theme-success-border: #427868;
    --theme-warning: #F4C47A;
    --theme-warning-bg: #443826;
    --theme-warning-border: #96784C;
    --theme-info: #8FCFFF;
    --theme-info-bg: #24394B;
    --theme-info-border: #466D8B;
}

/* Системная тема действует и при отключённом JavaScript. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --color-bg: #111827;
        --color-text: #E8EDF5;
        --color-text-light: #ACB8CA;
        --color-primary: #82B3FF;
        --color-dark: #1B2535;
        --color-dark-light: #243146;
        --theme-page: #111827;
        --theme-panel: #1B2535;
        --theme-raised: #243146;
        --theme-input: #243146;
        --theme-text: #E8EDF5;
        --theme-muted: #ACB8CA;
        --theme-border: #44536A;
        --theme-link: #82B3FF;
        --theme-focus: #82B3FF;
        --theme-hover: #2D3B51;
        --theme-selected: #2A3C58;
        --theme-overlay: rgba(0, 0, 0, 0.72);
        --theme-shadow-rgb: 0, 0, 0;
        --theme-panel-translucent: rgba(27, 37, 53, 0.95);
        --theme-panel-transparent: rgba(27, 37, 53, 0);
        --theme-danger: #FF9FA9;
        --theme-danger-bg: #462833;
        --theme-danger-border: #9E5363;
        --theme-success: #79DEC0;
        --theme-success-bg: #203E3A;
        --theme-success-border: #427868;
        --theme-warning: #F4C47A;
        --theme-warning-bg: #443826;
        --theme-warning-border: #96784C;
        --theme-info: #8FCFFF;
        --theme-info-bg: #24394B;
        --theme-info-border: #466D8B;
    }
}

/* Только тёмный вариант: браузерный серый placeholder теряется на графитовом поле. */
:root[data-theme="dark"] :where(input, textarea)::placeholder {
    color: var(--theme-muted);
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) :where(input, textarea)::placeholder {
        color: var(--theme-muted);
        opacity: 1;
    }
}

:root {
    --safe-top: max(env(safe-area-inset-top, 0px), var(--host-safe-top, 0px));
    --safe-right: max(env(safe-area-inset-right, 0px), var(--host-safe-right, 0px));
    --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--host-safe-bottom, 0px));
    --safe-left: max(env(safe-area-inset-left, 0px), var(--host-safe-left, 0px));
    --content-top: calc(var(--safe-top) + var(--host-content-top, 0px));
    --content-right: calc(var(--safe-right) + var(--host-content-right, 0px));
    --content-bottom: calc(var(--safe-bottom) + var(--host-content-bottom, 0px));
    --content-left: calc(var(--safe-left) + var(--host-content-left, 0px));
}