/* =============================================================
   ДИЗАЙН-ТОКЕНЫ
   Единственное место, где заданы цвета, шрифты, отступы и тени.
   Всё остальное в проекте ссылается только на переменные отсюда.
   ============================================================= */

:root {
    /* ---------- Фирменная палитра ---------- */
    --brand-blue: #249EFA;
    --brand-blue-600: #1B87DC;
    --brand-blue-700: #1470BA;
    --brand-blue-900: #0B3F6C;
    --brand-yellow: #FFDB58;
    --brand-yellow-600: #F2C63C;

    /* Мягкие оттенки фирменного синего для фонов и подложек */
    --brand-blue-050: #EFF7FF;
    --brand-blue-100: #D8ECFF;
    --brand-blue-200: #B4DBFF;

    /* ---------- Нейтральные ---------- */
    --ink-900: #12151A;
    --ink-800: #1A1C20;
    --ink-700: #2E333B;
    --ink-500: #5A616C;
    --ink-400: #7B828E;
    --ink-200: #D9DDE3;
    --ink-100: #ECEFF3;
    --ink-050: #F5F7FA;
    --white: #FFFFFF;

    /* ---------- Статусы ---------- */
    --ok-bg: #E7F8EC;
    --ok-border: #9AD9AF;
    --ok-text: #1E7A3D;
    --err-bg: #FDECEC;
    --err-border: #F2B6B6;
    --err-text: #B02A2A;
    --info-bg: var(--brand-blue-050);
    --info-border: var(--brand-blue-200);
    --info-text: #14568C;

    /* ---------- Семантические роли ---------- */
    --bg: var(--white);
    --bg-muted: var(--ink-050);
    --bg-invert: var(--ink-900);
    --surface: var(--white);
    --text: var(--ink-800);
    --text-soft: var(--ink-500);
    --text-invert: var(--white);
    --border: var(--ink-200);
    --accent: var(--brand-blue);
    --accent-contrast: var(--white);
    --focus: var(--brand-blue-700);

    /* ---------- Типографика ---------- */
    --font-display: "Baloo 2", "Baloo Cyrillic", "Comfortaa", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Плавные размеры: min на мобилке, max на десктопе, между ними — по ширине вьюпорта */
    --fs-display: clamp(2.25rem, 1.55rem + 3.1vw, 3.75rem);   /* 36 → 60 */
    --fs-h1: clamp(2rem, 1.45rem + 2.4vw, 3rem);              /* 32 → 48 */
    --fs-h2: clamp(1.65rem, 1.25rem + 1.8vw, 2.5rem);         /* 26 → 40 */
    --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);         /* 19 → 23 */
    --fs-lead: clamp(1.0625rem, 0.99rem + 0.35vw, 1.25rem);   /* 17 → 20 */
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-tiny: 0.8125rem;

    --lh-tight: 1.15;
    --lh-heading: 1.2;
    --lh-body: 1.6;

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

    /* ---------- Сетка и ритм ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;

    --shell-max: 1180px;
    --shell-pad: clamp(1rem, 0.4rem + 2.6vw, 3.75rem);
    --section-pad: clamp(3rem, 1.9rem + 4.6vw, 6rem);

    /* ---------- Форма ---------- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(18, 21, 26, 0.06), 0 2px 8px rgba(18, 21, 26, 0.06);
    --shadow-md: 0 4px 12px rgba(18, 21, 26, 0.08), 0 12px 28px rgba(18, 21, 26, 0.08);
    --shadow-lg: 0 12px 24px rgba(18, 21, 26, 0.10), 0 28px 60px rgba(18, 21, 26, 0.12);
    --shadow-blue: 0 10px 24px rgba(36, 158, 250, 0.28);

    /* ---------- Движение ---------- */
    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --dur-fast: 140ms;
    --dur: 220ms;

    /* ---------- Слои ---------- */
    --z-decor: 0;
    --z-content: 1;
    --z-header: 50;
    --z-skip: 100;

    --header-h: 72px;
}

/* Крупные экраны — чуть выше шапка */
@media (min-width: 900px) {
    :root {
        --header-h: 88px;
    }
}