/**
 * Design tokens — Wind Monitor (корпоративная палитра и типографика).
 */
:root {
    /* Основная палитра бренда */
    --color-brand-primary: #2c3e7a;
    --color-brand-secondary: #5d7bb5;

    /* Серые оттенки */
    --color-gray-50: #f8f9fa;
    --color-gray-100: #e9ecef;
    --color-gray-200: #dee2e6;
    --color-gray-300: #ced4da;
    --color-gray-400: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-800: #343a40;

    --color-white: #ffffff;
    --color-green-500: #22c55e;

    /* Прозрачные акценты */
    --color-accent-08: rgb(44 62 122 / 0.08);
    --color-accent-15: rgb(93 123 181 / 0.15);
    --color-accent-25: rgb(93 123 181 / 0.25);
    --color-black-05: rgb(0 0 0 / 0.05);
    --color-black-08: rgb(0 0 0 / 0.08);

    /* Семантические роли */
    --color-bg: var(--color-gray-50);
    --color-bg-warm: #e8eef5;
    --color-surface: var(--color-white);
    --color-text: var(--color-gray-800);
    --color-text-muted: var(--color-gray-600);
    --color-brand: var(--color-brand-secondary);
    --color-brand-dark: var(--color-brand-primary);
    --color-brand-navy: #243363;
    --color-border: var(--color-gray-200);
    --color-on-brand: var(--color-white);

    --header-height: 4.5rem;
    --header-bg: rgb(255 255 255 / 0.82);
    --header-bg-scrolled: rgb(255 255 255 / 0.98);
    --header-border: rgb(255 255 255 / 0.5);
    --header-shadow: 0 1px 8px rgb(44 62 122 / 0.06);
    --header-shadow-scrolled: 0 4px 24px rgb(44 62 122 / 0.12);

    /* Типографика — системный стек */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: var(--font-family-base);

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --font-size-xs: 0.8125rem;   /* 13px — подписи */
    --font-size-sm: 0.875rem;    /* 14px — мелкий текст */
    --font-size-base: 1rem;      /* 16px — основной */
    --font-size-lg: 1.125rem;    /* 18px — лид */
    --font-size-xl: 1.375rem;    /* 22px — h3 */
    --font-size-2xl: 1.75rem;    /* 28px — h2 */
    --font-size-3xl: 2.125rem;   /* 34px — h1 */

    --line-height-base: 1.6;
    --line-height-tight: 1.35;
    --line-height-heading: 1.25;

    /* Макет */
    --container-max-width: 1200px;
    --container-padding-x: 1.5rem;
    --section-spacing: 5rem;       /* 80px */
    --section-spacing-lg: 6.25rem; /* 100px */
    --section-gap-inner: 1.5rem;

    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 4px var(--color-black-05);
    --shadow-md: 0 4px 16px var(--color-black-08);
    --shadow-card: 0 2px 12px rgb(44 62 122 / 0.08);
    --shadow-card-hover: 0 8px 24px rgb(44 62 122 / 0.14);
    --shadow-btn: 0 4px 14px rgb(44 62 122 / 0.22);
    --shadow-glow: 0 0 24px var(--color-accent-15);

    --transition-base: 0.25s ease;
    --transition-btn: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;

    /* Градиенты */
    --gradient-page: linear-gradient(180deg, #f8f9fa 0%, #eef2f7 45%, #e8eef5 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
    --gradient-accent-soft: linear-gradient(135deg, #f8f9fa 0%, #e8eef5 100%);
}