/* =============================================================================
   tokens.css — единственное место, где заданы значения дизайн-системы.
   Всё остальное (base.css, components.css, pages/*.css) обращается только
   к переменным отсюда: цвет, отступ, радиус, размер шрифта, слой, длительность.

   Брейкпоинты проекта — ровно эти и никакие другие:
       базовые стили ........ 280px (самый узкий поддерживаемый экран)
       @media (min-width: 315px)   малые смартфоны
       @media (min-width: 515px)   смартфоны и узкие планшеты
       @media (min-width: 915px)   планшеты и ноутбуки, десктопное меню
       @media (min-width: 1200px)  полная десктопная компоновка
       @media (min-width: 2560px)  только расширение контейнера (2K)
       @media (min-width: 3840px)  только расширение контейнера (4K)
   ============================================================================= */

:root {
    /* --- Палитра (утверждена заказчиком, менять только здесь) --------------- */
    --c-bg: #F4F9FD;
    --c-surface: #FFFFFF;
    --c-cream: #FBF7EF;

    --c-sky: #A8D8F0;
    --c-sky-soft: #DCEDF9;
    --c-sky-line: #C7E2F4;

    --c-blue: #2A6FB0;
    --c-blue-deep: #123A6B;

    --c-ink: #0F2540;
    --c-muted: #5C7391;

    --c-red: #D7263D;
    --c-red-dark: #B01D31;
    --c-red-soft: #FBE4E7;

    --c-gold: #C9A227;
    --c-border: #D8E6F2;

    --c-success: #2E7D5B;
    --c-error: #C0392B;
    --c-warning: #E0A526;

    /* Полупрозрачные производные (для затемнения поп-апов и лёгких подложек) */
    --c-ink-veil: rgba(15, 37, 64, 0.72);
    --c-ink-veil-strong: rgba(15, 37, 64, 0.88);
    --c-surface-veil: rgba(255, 255, 255, 0.86);

    /* --- Типографика -------------------------------------------------------- */
    /* Гарнитуры подключаются локально из static/vendor/fonts (см. static/README.md).
       Пока файлов нет, работает системный запасной набор — вёрстка не ломается. */
    --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-text: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-script: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* Шкала кегля: плавный рост от 280px до 1200px, дальше фиксируется */
    --fs-xs: 0.8125rem;
    --fs-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
    --fs-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
    --fs-lg: clamp(1.0625rem, 1rem + 0.33vw, 1.25rem);
    --fs-xl: clamp(1.1875rem, 1.08rem + 0.55vw, 1.5rem);
    --fs-2xl: clamp(1.375rem, 1.2rem + 0.93vw, 2rem);
    --fs-3xl: clamp(1.625rem, 1.34rem + 1.52vw, 2.75rem);
    --fs-4xl: clamp(1.875rem, 1.45rem + 2.28vw, 3.5rem);
    --fs-hero: clamp(2.125rem, 1.55rem + 3.07vw, 4.25rem);

    --lh-tight: 1.1;
    --lh-heading: 1.2;
    --lh-snug: 1.35;
    --lh-base: 1.6;
    --lh-loose: 1.75;

    --ls-tight: -0.02em;
    --ls-wide: 0.06em;
    --ls-caps: 0.12em;

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

    /* Вертикальный ритм секций и зазор сеток — тянутся вместе с экраном */
    --section-y: clamp(2.5rem, 1.6rem + 4.8vw, 6rem);
    --section-y-sm: clamp(1.75rem, 1.3rem + 2.4vw, 3.5rem);
    --grid-gap: clamp(1rem, 0.72rem + 1.5vw, 2rem);

    /* --- Контейнер ---------------------------------------------------------- */
    --gutter: 1rem;
    --container-max: 1200px;
    --container-narrow: 46rem;  /* юридические тексты и длинные статьи */
    --container-wide: 1440px;   /* редкие блоки во всю ширину макета */

    /* --- Скругления и обводки ----------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-pill: 999px;

    --border-width: 2px;
    --border: var(--border-width) solid var(--c-border);
    --border-ink: var(--border-width) solid var(--c-ink);
    --border-sky: var(--border-width) solid var(--c-sky);

    /* Единственная разрешённая тень: поп-апы и выпадающие меню */
    --shadow-pop: 0 8px 24px rgba(15, 37, 64, 0.12);

    /* --- Фокус -------------------------------------------------------------- */
    --focus-width: 3px;
    --focus-color: var(--c-blue);
    --focus-offset: 2px;

    /* --- Слои (z-index) ----------------------------------------------------- */
    --z-decor: 1;        /* декоративные пятна, сетка-миллиметровка */
    --z-content: 2;      /* контент поверх декора */
    --z-sticky: 100;     /* липкие подзаголовки, кнопка «наверх» */
    --z-header: 200;     /* шапка сайта */
    --z-dropdown: 300;   /* выпадающие подменю */
    --z-backdrop: 400;   /* затемнение под мобильным меню */
    --z-drawer: 500;     /* мобильное меню */
    --z-lightbox: 600;   /* просмотр фотографий */
    --z-toast: 700;      /* системные сообщения поверх всего */

    /* --- Анимация ----------------------------------------------------------- */
    --dur-fast: 120ms;
    --dur: 220ms;
    --dur-slow: 420ms;
    --dur-marquee: 34s;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* --- Размеры интерфейса ------------------------------------------------- */
    --tap-size: 44px;          /* минимальная область нажатия по ТЗ */
    --header-height: 60px;
    --icon-size: 1.5rem;

    /* --- Декоративная сетка-миллиметровка ----------------------------------- */
    --grid-paper-step: 24px;
    --grid-paper-color: var(--c-sky-line);
}

@media (min-width: 315px) {
    :root {
        --gutter: 1.125rem;
    }
}

@media (min-width: 515px) {
    :root {
        --gutter: 1.5rem;
        --header-height: 68px;
        --grid-paper-step: 28px;
    }
}

@media (min-width: 915px) {
    :root {
        --gutter: 2rem;
        --header-height: 101px;
        --grid-paper-step: 32px;
    }
}

@media (min-width: 1200px) {
    :root {
        --gutter: 2.5rem;
        --header-height: 109px;
    }
}

/* На больших мониторах меняется только ширина контентной области */
@media (min-width: 2560px) {
    :root {
        --container-max: 1440px;
        --gutter: 3rem;
    }
}

@media (min-width: 3840px) {
    :root {
        --container-max: 1600px;
    }
}