/* ===== Токены дизайн-системы (UI Standards v1.0) ===== */
:root {
    --color-primary: #368FA2;
    --color-primary-hover: #28788A;
    --color-primary-active: #216575;
    --color-background: #FFFFFF;
    --color-surface: #F6FAFB;
    --color-text-primary: #1E2930;
    --color-text-secondary: #64747B;
    --color-border: #DDE7EA;
    --color-accent-light: #EAF5F7;
    --color-accent-dark: #20515D;
    --color-divider: #EDF2F3;
    --color-warm-surface: #FAF7F5;
    --color-overlay: rgba(30, 41, 48, .55);
    --color-success: #3E8C67;
    --color-warning: #C98A35;
    --color-error: #C65353;
    --color-info: #368FA2;

    --font-sans: 'Inter', Arial, sans-serif;
    --font-display: 'Philosopher', Georgia, serif;

    --text-h1: clamp(2.25rem, 1.72rem + 2.25vw, 3.5rem);
    --text-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
    --text-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
    --text-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --text-h5: 1rem;
    --text-h6: 0.75rem;
    --text-body-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
    --text-body: 1rem;
    --text-body-sm: 0.875rem;
    --text-button: 0.9375rem;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 56px;
    --space-9: 72px;
    --space-10: 96px;

    --container-width: 1240px;
    --content-width: 760px;
    --container-padding-desktop: 40px;
    --container-padding-tablet: 30px;
    --container-padding-mobile: 20px;

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 999px;

    --shadow-sm: 0 2px 8px rgba(30, 41, 48, .06);
    --shadow-md: 0 8px 24px rgba(30, 41, 48, .10);
    --shadow-lg: 0 16px 40px rgba(30, 41, 48, .12);

    --transition-base: 0.3s ease;
    --transition-active: 0.1s ease;
    --transition-card: 0.4s ease;
    --transition-card-image: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    --motion-duration: 600ms;
    --motion-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
    --motion-distance: 24px;

    --header-height: 88px;
    --header-gap: 16px;
    --header-total: calc(var(--header-height) + var(--header-gap) + var(--space-2));
}