/*
 * tokens.css — единственное место, где в проекте появляются конкретные значения:
 * цвета, отступы, радиусы, размеры шрифта, длительности, тени.
 *
 * Правило раздела «СТИЛИСТИКА» CLAUDE.md: в остальных файлах цвет пишется только
 * переменной отсюда, а отступ — только значением из шкалы. Поэтому HEX и rgba
 * встречаются в проекте ровно один раз — в этом файле; проверка bin/check-design.php
 * следит, чтобы это не изменилось.
 *
 * Тема одна, светлая. Второго набора HEX (тёмная тема) в проекте нет и не заводится.
 */

:root {
    /* --- Палитра cool paper + cobalt. Контрасты просчитаны по WCAG. --- */
    --background: #F4F7FF;          /* прохладная бумага, фон страницы */
    --surface: #FFFFFF;             /* плитки, шапка, поля */
    --surface-secondary: #E5ECFB;   /* дуги-разделители, футер, подложки */
    --text-primary: #10182B;        /* чернильный, 16.5:1 на фоне */
    --text-secondary: #4C5877;      /* подписи и мета, 6.6:1 на фоне */
    --brand: #2547E0;               /* кобальт, 6.4:1 на фоне, белый текст 6.9:1 */
    --brand-hover: #1A35B4;         /* hover и active, белый текст 9.5:1 */
    --brand-soft: #DCE4FE;          /* secondary-кнопки, callout, активные состояния */
    --border: #C9D4EE;              /* декоративные линии и рамки плиток */
    --success: #0B6B47;             /* доступно, файл готов */
    --warning: #8F4E00;             /* «Версия готовится», ограничения */
    --error: #B62419;               /* ошибки и недоступные состояния */

    /* --- Шкала отступов. Значений мимо шкалы в проекте нет. --- */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-40: 40px;
    --space-64: 64px;
    --space-96: 96px;

    /* --- Радиусы. Углов 4–8px и острых углов в проекте нет. --- */
    --radius-sm: 10px;      /* бейджи, поля ввода */
    --radius-md: 16px;      /* плитки, поверхности */
    --radius-lg: 18px;      /* крупные блоки, CTA-плашка, футер */
    --radius-pill: 999px;   /* кнопки, чипы, шапка */

    /* --- Движение: 140–200ms, ease-out, один «прыжок» иконки в hero. --- */
    --duration-fast: 140ms;
    --duration-base: 200ms;
    /* Единственная анимация сайта: иконка в hero один раз подпрыгивает при загрузке.
       Это не переход интерфейса, поэтому длительность больше 200ms. */
    --duration-jump: 600ms;
    --ease-out: ease-out;

    /* --- Шрифты: локальные Rubik и Onest, подключение в base.css. ---
       Вторым в списке стоит метрический дублёр из base.css: пока свой шрифт грузится,
       текст набирается системным, но той же ширины — при подмене вёрстка не прыгает. */
    --font-family-display: "Rubik", "Rubik Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-family-text: "Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Мобильные размеры; десктопные — ниже, в медиазапросе. */
    --font-size-h1: 34px;
    --font-size-h2: 26px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;
    --font-size-body: 16px;
    --font-size-small: 14px;
    --font-size-caption: 13px;

    --line-height-tight: 1.1;   /* заголовки */
    --line-height-text: 1.65;   /* текст */

    /* --- Раскладка. --- */
    --container: 1200px;        /* общая ширина контента */
    --text-column: 680px;       /* текстовая колонка */
    --gutter: 20px;             /* горизонтальный гаттер, десктоп — 28px */
    --section-rhythm: 56px;     /* вертикальный ритм секций, десктоп — 104px */

    --control-height: 52px;         /* кнопка обычная */
    --control-height-compact: 44px; /* кнопка в шапке и в плотных местах */

    /* --- Тени: мягкие, без цветных ореолов. --- */
    --shadow-soft: 0 4px 20px rgba(16, 24, 43, 0.08);
    --shadow-card: 0 2px 12px rgba(16, 24, 43, 0.06);
    --shadow-lift: 0 10px 28px rgba(16, 24, 43, 0.12);

    /* --- Слои: шапка ниже мобильного меню, меню выше затемнения. --- */
    --z-header: 20;
    --z-overlay: 30;
    --z-sheet: 40;
}

@media (min-width: 768px) {
    :root {
        --font-size-h1: 56px;
        --font-size-h2: 36px;
        --font-size-h3: 26px;
        --font-size-h4: 20px;
        --font-size-body: 18px;

        --gutter: 28px;
        --section-rhythm: 104px;
    }
}