/**
 * nApp Design System — Токены дизайна
 *
 * Wellness-платформа нутрициолога Мари
 * Стиль: Deliciously Ella + Minimalist Baker
 *
 * Палитра: тёплый сливочно-бежевый фон, шалфейно-зелёные акценты,
 *          спокойный ягодный CTA, медовые декоративные элементы.
 */

:root {
    /* ========================================================================
     * 1. ФОНЫ И ПОВЕРХНОСТИ (Backgrounds & Surfaces)
     * ======================================================================== */

    /* Основной фон страницы — сливочно-бежевый */
    --color-bg-main: #FFF9F4;

    /* Чисто белый — карточки, модалки, блоки поверх тонированных секций */
    --color-bg-alt: #FFFFFF;

    /* Тёплая насыщенная поверхность — hero-блоки, промо-плашки, баннеры */
    --color-surface-soft: #FFF3E8;

    /* Пыльно-бежевый — разделители, боковые панели, подложки под фильтры */
    --color-surface-muted: #F4ECE3;

    /* Футер — чуть темнее основного фона */
    --color-surface-footer: #F1E5D9;


    /* ========================================================================
     * 2. ОСНОВНЫЕ АКЦЕНТЫ (Primary & Brand Colors)
     * ======================================================================== */

    /* Шалфейно-зелёный — wellness акцент */
    --color-primary-green: #6BA78A;
    --color-primary-green-dark: #3F7F63;
    --color-primary-green-light: #EAF3EE;

    /* Ягодный акцент — главные CTA */
    --color-accent-berry: #C45A7B;
    --color-accent-berry-dark: #A04463;
    --color-accent-berry-light: #FCEEF2;

    /* Медовый/карамельный акцент — декоративные элементы */
    --color-accent-honey: #D79A48;
    --color-accent-honey-dark: #B5792D;
    --color-accent-honey-light: #FFF0D9;


    /* ========================================================================
     * 3. ТЕКСТ И НЕЙТРАЛЬНЫЕ ЦВЕТА (Text & Neutrals)
     * ======================================================================== */

    /* Основной текст — смягчённый чёрный */
    --color-text-main: #2C2C2C;

    /* Вторичный текст — подписи, подсказки */
    --color-text-soft: #6E6E6E;

    /* Приглушённый текст — мелкие сервисные элементы */
    --color-text-muted: #A59A90;

    /* Границы и разделители */
    --color-border-light: #E5DED5;
    --color-border-medium: #D5CCC2;


    /* ========================================================================
     * 4. ТЕГИ ДИЕТ И ОГРАНИЧЕНИЙ (Diet & Restriction Tags)
     * ======================================================================== */

    /* Без глютена — мятно-зелёный */
    --color-tag-gluten-free-bg: #DFF3E8;
    --color-tag-gluten-free-text: #2D6B4F;

    /* Без сахара — лиловый */
    --color-tag-sugar-free-bg: #F4E6F6;
    --color-tag-sugar-free-text: #71407E;

    /* Без лактозы — голубой */
    --color-tag-lactose-free-bg: #E7F1FB;
    --color-tag-lactose-free-text: #365B86;

    /* Время приготовления */
    --color-tag-time-bg: #FFF0D9;
    --color-tag-time-text: #A86A25;

    /* Сложность */
    --color-tag-difficulty-bg: #EEE5DB;
    --color-tag-difficulty-text: #7A6451;

    /* Кето */
    --color-tag-keto-bg: #E8F4E8;
    --color-tag-keto-text: #3D6B3D;

    /* ПП (правильное питание) */
    --color-tag-pp-bg: #FFF5E6;
    --color-tag-pp-text: #8B6914;


    /* ========================================================================
     * 5. СТАТУСЫ И УВЕДОМЛЕНИЯ (Status & Feedback)
     * ======================================================================== */

    --color-success: #4BA97A;
    --color-success-bg: #E8F5EE;

    --color-warning: #E29B3D;
    --color-warning-bg: #FFF5E6;

    --color-error: #D76363;
    --color-error-bg: #FDEAEA;

    --color-info: #5B8DB8;
    --color-info-bg: #EBF4FA;


    /* ========================================================================
     * 6. ТЕНИ (Shadows)
     * ======================================================================== */

    /* Мягкая тень для карточек */
    --shadow-soft: 0 8px 24px rgba(25, 16, 7, 0.04);

    /* Тень при наведении */
    --shadow-hover: 0 12px 32px rgba(25, 16, 7, 0.08);

    /* Тень для шапки */
    --shadow-header: 0 4px 16px rgba(25, 16, 7, 0.03);

    /* Тень для модалок и попапов */
    --shadow-modal: 0 20px 48px rgba(25, 16, 7, 0.12);


    /* ========================================================================
     * 7. ГРАДИЕНТЫ (Gradients)
     * ======================================================================== */

    /* Hero-блок — мягкий бежевый переход */
    --gradient-hero: linear-gradient(180deg, #FFF9F4 0%, #FDE9D6 100%);

    /* Акцентный градиент для особых промо */
    --gradient-cta: linear-gradient(135deg, #C45A7B 0%, #D79A48 100%);

    /* Зелёный градиент */
    --gradient-green: linear-gradient(135deg, #6BA78A 0%, #3F7F63 100%);


    /* ========================================================================
     * 8. ТИПОГРАФИКА (Typography)
     * ======================================================================== */

    /* Семейство шрифтов */
    --font-family-base: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-display: 'DM Sans', 'Inter', sans-serif;

    /* Размеры шрифтов */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */
    --font-size-5xl: 3rem;       /* 48px */

    /* Межстрочный интервал */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Жирность шрифта */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* ========================================================================
     * 9. ОТСТУПЫ И РАЗМЕРЫ (Spacing & Sizing)
     * ======================================================================== */

    /* Базовый модуль — 8px */
    --spacing-unit: 0.5rem;  /* 8px */

    /* Шкала отступов */
    --spacing-1: 0.25rem;    /* 4px */
    --spacing-2: 0.5rem;     /* 8px */
    --spacing-3: 0.75rem;    /* 12px */
    --spacing-4: 1rem;       /* 16px */
    --spacing-5: 1.25rem;    /* 20px */
    --spacing-6: 1.5rem;     /* 24px */
    --spacing-8: 2rem;       /* 32px */
    --spacing-10: 2.5rem;    /* 40px */
    --spacing-12: 3rem;      /* 48px */
    --spacing-16: 4rem;      /* 64px */
    --spacing-20: 5rem;      /* 80px */
    --spacing-24: 6rem;      /* 96px */

    /* Ширина контейнера */
    --container-max: 1280px;
    --container-narrow: 768px;


    /* ========================================================================
     * 10. СКРУГЛЕНИЯ (Border Radius)
     * ======================================================================== */

    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.25rem;   /* 20px */
    --radius-3xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;


    /* ========================================================================
     * 11. ПЕРЕХОДЫ И АНИМАЦИИ (Transitions)
     * ======================================================================== */

    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* Easing */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
}


/* ============================================================================
 * БАЗОВЫЕ СТИЛИ КОМПОНЕНТОВ
 * ============================================================================ */

/* Кнопки */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    line-height: 1;
    border-radius: var(--radius-full);
    transition: all var(--transition-normal);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-accent-berry);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-accent-berry-dark);
}

.btn-secondary {
    background-color: var(--color-primary-green);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--color-primary-green-dark);
}

.btn-outline {
    background-color: var(--color-bg-alt);
    color: var(--color-primary-green);
    border: 2px solid var(--color-primary-green);
}

.btn-outline:hover {
    background-color: var(--color-primary-green-light);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-text-soft);
}

.btn-ghost:hover {
    background-color: var(--color-surface-muted);
    color: var(--color-text-main);
}

/* Размеры кнопок */
.btn-sm {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
}


/* Карточки */
.card {
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    transition: all var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

.card-body {
    padding: var(--spacing-6);
}


/* Теги */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.tag-gluten-free {
    background-color: var(--color-tag-gluten-free-bg);
    color: var(--color-tag-gluten-free-text);
}

.tag-sugar-free {
    background-color: var(--color-tag-sugar-free-bg);
    color: var(--color-tag-sugar-free-text);
}

.tag-lactose-free {
    background-color: var(--color-tag-lactose-free-bg);
    color: var(--color-tag-lactose-free-text);
}

.tag-time {
    background-color: var(--color-tag-time-bg);
    color: var(--color-tag-time-text);
}

.tag-difficulty {
    background-color: var(--color-tag-difficulty-bg);
    color: var(--color-tag-difficulty-text);
}

.tag-keto {
    background-color: var(--color-tag-keto-bg);
    color: var(--color-tag-keto-text);
}

.tag-pp {
    background-color: var(--color-tag-pp-bg);
    color: var(--color-tag-pp-text);
}

.tag-new {
    background-color: var(--color-accent-berry);
    color: white;
}

.tag-pro {
    background-color: var(--color-primary-green);
    color: white;
}


/* Секции */
.section {
    padding: var(--spacing-16) 0;
}

.section-soft {
    background-color: var(--color-surface-soft);
}

.section-muted {
    background-color: var(--color-surface-muted);
}


/* Контейнер */
.container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
}


/* Типографика */
.heading-1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
}

.heading-2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
}

.heading-3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
}

.text-body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-soft);
}

.text-small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-muted);
}


/* Ссылки */
.link {
    color: var(--color-accent-berry);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.link:hover {
    color: var(--color-accent-berry-dark);
}

.link-green {
    color: var(--color-primary-green);
}

.link-green:hover {
    color: var(--color-primary-green-dark);
}


/* Формы */
.input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.input:focus {
    outline: none;
    border-color: var(--color-primary-green);
    box-shadow: 0 0 0 3px var(--color-primary-green-light);
}

.input::placeholder {
    color: var(--color-text-muted);
}


/* Иконки в кружках */
.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-surface-muted);
}

.icon-circle-green {
    background-color: var(--color-primary-green-light);
    color: var(--color-primary-green);
}

.icon-circle-honey {
    background-color: var(--color-accent-honey-light);
    color: var(--color-accent-honey);
}

.icon-circle-berry {
    background-color: var(--color-accent-berry-light);
    color: var(--color-accent-berry);
}


/* Бейджи */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
}

.badge-honey {
    background-color: var(--color-accent-honey-light);
    color: var(--color-accent-honey-dark);
}

.badge-green {
    background-color: var(--color-primary-green-light);
    color: var(--color-primary-green-dark);
}

.badge-berry {
    background-color: var(--color-accent-berry-light);
    color: var(--color-accent-berry);
}


/* Разделители */
.divider {
    height: 1px;
    background-color: var(--color-border-light);
    margin: var(--spacing-8) 0;
}


/* Скрытие элементов */
[x-cloak] {
    display: none !important;
}

/* Скрытие скроллбара (для горизонтальных прокруток) */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE и Edge */
    scrollbar-width: none;     /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
}


/* Утилиты анимаций */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.5s var(--ease-out) forwards;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s var(--ease-in-out) infinite;
}


/* ====================================================================
   Защита контента от копирования
   ==================================================================== */

/* Запрет выделения текста на защищённых элементах */
[data-protected] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Print protection: watermark поверх страницы */
@media print {
    /* Копирайт-подпись под каждой защищённой секцией */
    [data-protected]::after {
        content: "\00A9  nappmari.com \2014  \043B\0438\0447\043D\043E\0435  \0438\0441\043F\043E\043B\044C\0437\043E\0432\0430\043D\0438\0435";
        display: block;
        text-align: center;
        color: rgba(0, 0, 0, 0.12);
        font-size: 12px;
        margin-top: 12px;
        padding-top: 8px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    /* Диагональный watermark на всю страницу */
    .print-watermark::before {
        content: "\00A9  nappmari.com";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        font-size: 72px;
        color: rgba(0, 0, 0, 0.06);
        z-index: 9999;
        pointer-events: none;
        white-space: nowrap;
        font-weight: 700;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}