/* * {
    outline: 1px solid red;
} */

:root {
    /* Базовые */
    /* Абсолютные якоря */
    --color-dark: #203a2d;
    --color-dark-rgb: 32, 58, 45;

    --color-light: #f4f5e6;
    --color-light-rgb: 244, 245, 230;

    /* Основная цветовая схема */
    --color-bg: var(--color-light);
    --color-bg-rgb: var(--color-light-rgb);
    --color-bg-extra: #fffffa;

    --color-text: var(--color-dark);
    --color-text-rgb: var(--color-dark-rgb);

    --color-primary: #e6a84c;
    --color-primary-hover: #d9963f;
    --color-primary-rgb: 230, 168, 76;

    --color-secondary-50: #eef1dc;
    --color-secondary-100: #e3e8c9;
    --color-secondary-200: #d7deae;
    --color-secondary-300: #cdd290;
    --color-secondary-400: #bfc88a;
    --color-secondary-500: #aebc76;
    --color-secondary-600: #9aad62;
    --color-secondary-700: #869f4e;
    --color-secondary-800: #6f853c;
    --color-secondary-900: #566b2f;

    --color-secondary: var(--color-secondary-100);

    --color-accent: #e26f20;
    --color-accent-rgb: 226, 111, 32;

    /* Системные */
    --color-success: #4ac97e; /* теперь логично */
    --color-warning: #ffc107;
    --color-error: #d0302f;
    --color-info: #82dbf7;

    /* Оттенки серого */
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;

    --min-font-size: 1rem; /* 16px по умолчанию */
    --max-font-size: 1.375rem; /* 22px по умолчанию */

    /* Оптимальная формула расчета */
    --text-base-size: clamp(
        var(--min-font-size),
        calc(1rem + 0.25vw + 0.1vh),
        var(--max-font-size)
    );

    /* Альтернативный вариант с фиксированными пикселями */
    --text-fluid-size: clamp(16px, calc(16px + 0.3vw + 0.1vh), 22px);

    /* ===== Относительные единицы для типографики ===== */
    --text-scale-ratio: 1.2;
    --line-height-base: 1.4;

    /* Иерархия шрифтов */
    --text-xs: calc(var(--text-base-size) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: var(--text-base-size);
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));

    /* ===== Отступы ===== */
    --space-vertical-unit: 1svh;
    --space-vertical-xxs: clamp(
        0.25rem,
        calc(0.25 * var(--space-vertical-unit)),
        0.5rem
    );
    --space-vertical-xs: clamp(
        0.5rem,
        calc(0.5 * var(--space-vertical-unit)),
        1rem
    );
    --space-vertical-sm: clamp(
        0.75rem,
        calc(0.75 * var(--space-vertical-unit)),
        1.5rem
    );
    --space-vertical-md: clamp(1rem, var(--space-vertical-unit), 2rem);
    --space-vertical-lg: clamp(
        1.5rem,
        calc(1.5 * var(--space-vertical-unit)),
        3rem
    );
    --space-vertical-xl: clamp(
        2rem,
        calc(2 * var(--space-vertical-unit)),
        4rem
    );
    --space-vertical-xxl: clamp(
        3rem,
        calc(3 * var(--space-vertical-unit)),
        6rem
    );

    /* Горизонтальные отступы (зависят от ширины экрана) */
    --space-horizontal-unit: 1vw;
    --space-horizontal-xxs: clamp(
        0.25rem,
        calc(0.25 * var(--space-horizontal-unit)),
        0.5rem
    );

    --space-horizontal-xs: clamp(
        0.5rem,
        calc(0.5 * var(--space-horizontal-unit)),
        1rem
    );
    --space-horizontal-sm: clamp(
        0.75rem,
        calc(0.75 * var(--space-horizontal-unit)),
        1.5rem
    );
    --space-horizontal-md: clamp(1rem, var(--space-horizontal-unit), 2rem);
    --space-horizontal-lg: clamp(
        1.5rem,
        calc(1.5 * var(--space-horizontal-unit)),
        3rem
    );
    --space-horizontal-xl: clamp(
        2rem,
        calc(2 * var(--space-horizontal-unit)),
        4rem
    );
    --space-horizontal-xxl: clamp(
        3rem,
        calc(3 * var(--space-horizontal-unit)),
        6rem
    );

    /* ===== Тени ===== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.25);

    /* ===== Радиусы скругления ===== */
    --radius-sm: calc(var(--text-base-size) * 0.25);
    --radius-md: calc(var(--text-base-size) * 0.5);
    --radius-lg: calc(var(--text-base-size) * 1);
    --radius-xl: calc(var(--text-base-size) * 1.5);
    --radius-full: 9999px;

    /* ===== Анимации ===== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.45s ease;

    /* ===== z-index ===== */
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-fixed: 300;
    --z-index-modal: 400;
    --z-index-toast: 500;

    /* ===== Макет ===== */
    --max-width-container: 1440px;
    --max-width-text: 65ch;

    --header-height: 70px;
}

/* ===== Темная тема ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: var(--color-dark);
        --color-bg-rgb: var(--color-dark-rgb);
        --color-bg-extra: #0c2619;

        --color-text: var(--color-light);
        --color-text-rgb: var(--color-light-rgb);

        --color-secondary: var(--color-secondary-700);

        --color-primary: #e6a84c;
        --color-primary-hover: #d9963f;

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6);
        --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.7);

        /* ---------- SECONDARY ---------- */

        --color-secondary: var(--color-secondary-900);

        /* ---------- GRAYS ---------- */

        --color-gray-100: #212529;
        --color-gray-200: #343a40;
        --color-gray-300: #495057;
        --color-gray-400: #6c757d;
        --color-gray-500: #adb5bd;
        --color-gray-600: #ced4da;
        --color-gray-700: #dee2e6;
        --color-gray-800: #e9ecef;
        --color-gray-900: #f8f9fa;
    }
}

/* ===== Базовые стили ===== */

/* Оптимизация для режима экономии энергии */
/* @media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
} */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    position: relative;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

* {
    padding: 0;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Отключаем подсветку тапов на мобильных */
a,
button,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

button,
a,
img,
svg {
    user-select: none;
}
button {
    color: inherit;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.container {
    width: 100%;
    max-width: var(--max-width-container);
    margin-inline: auto;
    padding-inline: var(--space-horizontal-md);
    flex: 1;
    min-height: 0;
}

.section {
    width: 100%;
    padding-block: var(--space-vertical-md);
}

summary {
    list-style: none;
}

summary::marker,
summary::-webkit-details-marker {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}

@media (max-width: 1440px) {
    .container {
        padding-inline: var(--space-vertical-md);
    }
    .section {
        padding-block: var(--space-vertical-md);
    }
}
@media (max-width: 768px) {
    /* Уменьшаем базовый размер шрифта для мобильных */
    :root {
        --min-font-size: 12px;
        --max-font-size: 16px;
    }
    .container {
        padding-inline: var(--space-vertical-sm);
    }
    .section {
        padding-block: var(--space-vertical-sm);
    }
}

@media (max-width: 480px) {
    :root {
        --min-font-size: 11px;
        --max-font-size: 14px;
        --header-height: 60px;
    }
    .container {
        padding-inline: var(--space-vertical-xs);
    }
    .section {
        padding-block: var(--space-vertical-xs);
    }
}

/* ===== Стили для скроллбаров ===== */

/* WebKit (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--color-bg);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-400); /* или color-primary / rgba(...) */
    border-radius: 10px;
    border: 1px solid var(--color-bg);
}

/* Firefox */
* {
    scrollbar-width: thin; /* "auto" | "thin" | "none" */
    scrollbar-color: var(--color-gray-400) var(--color-bg); /* thumb track */
}

@media (prefers-color-scheme: dark) {
    *::-webkit-scrollbar-thumb {
        background-color: var(--color-gray-600);
        border: 2px solid var(--color-bg);
    }

    * {
        scrollbar-color: var(--color-gray-600) var(--color-bg);
    }
}