/* ==========================================================================
   tokens.css — дизайн-токены "Liquid Glass" (зеркало темы Android-приложения:
   app/.../core/ui/theme/Color.kt, Dimens.kt, Type.kt).
   Подключается в base.html ПЕРВЫМ (шрифт Inter — <link> в base.html), а на автономных
   страницах входа — через @import в style-login.css. Остальные файлы используют только var(--…).
   ========================================================================== */

:root {
    color-scheme: light dark;

    /* --- Палитра (Color.kt) --- */
    --c-primary: #4A9A5F;            /* NovaGreen — декор, свечение, границы */
    --c-primary-light: #8BCB80;      /* NovaGreenLight */
    --c-primary-dark: #367447;       /* NovaGreenDark (#3D7F4E) чуть темнее ради WCAG AA: текст на --c-container ≥ 4.5:1 */
    --c-primary-strong: #2C6039;     /* hover/active для primary */
    --c-container: #E0F3E0;          /* NovaGreenContainer */
    --c-bg: #F8FAF7;
    --c-surface: #FFFFFF;
    --c-text: #1F2937;
    --c-muted: #5B6472;              /* чуть темнее #6B7280 ради AA на стекле */
    --c-warm: #D97D45;               /* NovaRed — скидки/ошибки (декор) */
    --c-warm-strong: #A9531F;        /* тот же тон для текста (AA) */
    --c-warm-container: #F5E3D3;
    --c-on-primary: #FFFFFF;

    /* --- Стекло --- */
    --glass-rgb: 255, 255, 255;
    --glass-bg: rgba(var(--glass-rgb), .62);
    --glass-bg-strong: rgba(var(--glass-rgb), .84);
    --glass-border: rgba(255, 255, 255, .55);
    --glass-line: rgba(61, 127, 78, .16);          /* тонкие разделители внутри стекла */
    --glass-shadow: 0 8px 32px rgba(74, 154, 95, .20), inset 0 1px 0 rgba(255, 255, 255, .6);
    --glass-shadow-hover: 0 14px 40px rgba(74, 154, 95, .30), inset 0 1px 0 rgba(255, 255, 255, .7);
    --glass-filter: blur(18px) saturate(150%);

    /* --- Фон страницы --- */
    --page-veil-top: rgba(248, 250, 247, .74);
    --page-veil-bottom: rgba(224, 243, 224, .86);

    /* --- Кнопки (общие рецепты; используются в glass.css, style-index.css, cart.css…) --- */
    --btn-primary-bg: linear-gradient(135deg, var(--c-primary-strong), var(--c-primary-dark));
    --btn-primary-bg-hover: linear-gradient(135deg, #285534, var(--c-primary-strong));
    --btn-primary-shadow: 0 6px 18px rgba(61, 127, 78, .35);
    --btn-primary-shadow-hover: 0 10px 26px rgba(61, 127, 78, .45);

    /* --- Радиусы (Dimens.kt: Radii) --- */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* --- Отступы, шаг 8px (Dimens.kt: Spacing) --- */
    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 32px;
    --sp-5: 48px;

    /* --- Типографика (Type.kt: Inter) --- */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* --- Движение --- */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur: .25s;
}

/* Тёмная тема — по системной настройке ИЛИ по ручному переключателю в шапке (кнопка в
   base.html, сохраняет выбор в localStorage "theme"; theme-toggle.js выставляет
   [data-theme="dark"/"light"] на <html> ДО отрисовки, чтобы не было мигания светлой темой).
   ":root:not([data-theme='light'])" — системная тёмная тема отключается, если пользователь явно
   выбрал светлую; ":root[data-theme='dark']" — работает независимо от системной темы. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-primary-dark: #4A9A5F;
        --c-primary-strong: #5DB273;
        --c-container: #1F3324;
        --c-bg: #11140F;
        --c-surface: #1B1F1C;
        --c-text: #ECEFEC;
        --c-muted: #A3ABA5;
        --c-warm-strong: #F0A272;
        --c-warm-container: #3A2A1F;
        --c-on-primary: #0E1A11;

        --btn-primary-bg: linear-gradient(135deg, var(--c-primary-strong), var(--c-primary-dark));
        --btn-primary-bg-hover: linear-gradient(135deg, #7CC58D, var(--c-primary-strong));
        --btn-primary-shadow: 0 6px 18px rgba(0, 0, 0, .45);
        --btn-primary-shadow-hover: 0 10px 26px rgba(0, 0, 0, .55);

        --glass-rgb: 42, 47, 44;
        --glass-bg: rgba(var(--glass-rgb), .58);
        --glass-bg-strong: rgba(27, 31, 28, .86);
        --glass-border: rgba(255, 255, 255, .14);
        --glass-line: rgba(139, 203, 128, .18);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
        --glass-shadow-hover: 0 14px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);

        --page-veil-top: rgba(17, 20, 15, .80);
        --page-veil-bottom: rgba(17, 20, 15, .90);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --c-primary-dark: #4A9A5F;
    --c-primary-strong: #5DB273;
    --c-container: #1F3324;
    --c-bg: #11140F;
    --c-surface: #1B1F1C;
    --c-text: #ECEFEC;
    --c-muted: #A3ABA5;
    --c-warm-strong: #F0A272;
    --c-warm-container: #3A2A1F;
    --c-on-primary: #0E1A11;

    --btn-primary-bg: linear-gradient(135deg, var(--c-primary-strong), var(--c-primary-dark));
    --btn-primary-bg-hover: linear-gradient(135deg, #7CC58D, var(--c-primary-strong));
    --btn-primary-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    --btn-primary-shadow-hover: 0 10px 26px rgba(0, 0, 0, .55);

    --glass-rgb: 42, 47, 44;
    --glass-bg: rgba(var(--glass-rgb), .58);
    --glass-bg-strong: rgba(27, 31, 28, .86);
    --glass-border: rgba(255, 255, 255, .14);
    --glass-line: rgba(139, 203, 128, .18);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
    --glass-shadow-hover: 0 14px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);

    --page-veil-top: rgba(17, 20, 15, .80);
    --page-veil-bottom: rgba(17, 20, 15, .90);
}

:root[data-theme="light"] {
    color-scheme: light;
}

/* Браузеры без backdrop-filter: плотная заливка вместо стекла, чтобы не терять читаемость. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --glass-bg: var(--glass-bg-strong);
        --glass-filter: none;
    }
}

/* --- База --- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--c-text);
    background-color: var(--c-bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Фиксированный фон из приложения (AnimatedBackground.kt): фото растений под пастельной вуалью. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, var(--page-veil-top), var(--page-veil-bottom)),
        url("../image/plant-background-image-5.jpg") center / cover no-repeat;
    pointer-events: none;
}

::selection {
    background: var(--c-primary-light);
    color: #10210F;
}

/* Видимый фокус с клавиатуры */
:focus-visible {
    outline: 3px solid var(--c-primary-light);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}