:root {
    /* 
     * ========================================
     * COLORS
     * ========================================
     */
    
    /* Основные тона */
    --color-background-tone-1: #244C87;  /* Background tone 1 */
    --color-blank: #FEFEFE;               /* Blank */
    
    /* Акценты */
    --color-accent-1: #003049;
    --color-accent-2: #5A8AF9;
    --color-accent-3: #3C6A9C;
    --color-accent-4: #B7D5F5;
    
    /* Цвета для форм */
    --color-input-midtone-1: rgba(120, 120, 128, 0.16); /* Input midtone 1 */
    --color-placeholder: rgba(0, 0, 0, 0.5);            /* Placeholder */
    --color-background-blur: rgba(0, 0, 0, 0.4);        /* Background blur */
    
    /* Соцсети */
    --color-vk: #0079FF;                  /* VK color */
    --color-yandex: #FF1B00;               /* Yandex color */
    --color-google-blue: #4285F4;          /* Google blue color */
    --color-google-red: #EB4335;           /* Google red color */
    --color-google-yellow: #FBBC05;        /* Google yellow color */
    --color-google-green: #34A853;         /* Google green color */
    
    /* Дополнительные */
    --color-dark: #780000;                 /* Dark */
    --color-mid: #E63034;                   /* Mid */
    --color-base: #FDF0D5;                 /* Base */
    
    /* 
     * ========================================
     * TYPOGRAPHY
     * ========================================
     */
    
    /* Семейства шрифтов */
    --font-primary: 'Inter', sans-serif;
    --font-company: 'Lexend Giga', sans-serif;
    --font-slogan: 'Nunito', sans-serif;
    
    /* Размеры текста */
    --text-company-name: 70px;            /* Company name size */
    --text-slogan: 40px;                    /* Slogan size */
    --text-form-title: 40px;                    /* Form title size */
    --text-button: 24px;                     /* Buttons text size */
    --text-input: 20px;                      /* Input text size */
    --text-annotation: 20px;                 /* Input annotation size */
    --text-links: 20px;                      /* Links size */
    --text-small-annotation: 16px;           /* Small annotation size */

    /*
     * ========================================
     * HOME TOKENS
     * ========================================
     */

    --home-color-background: #D9D9D9;
    --home-color-surface: #F2F2F2;
    --home-color-text: #1F2D3D;
    --home-color-text-muted: #314662;
    --home-color-border: #8EA0B0;
    --home-color-brand: #2F5E9F;
    --home-color-brand-light: #D7E6FF;
    --home-color-overlay: rgba(243, 243, 243, 0.3);
    --home-color-shadow: rgba(17, 34, 58, 0.18);

    --home-text-1: 72px;
    --home-text-2: 32px;
    --home-text-3: 24px;
    --home-text-4: 20px;
    --home-text-5: 16px;
    --home-text-logo: 40px;
    --home-text-hero-title-tablet: 58px;
    --home-text-logo-mobile: 40px;
    --home-text-hero-title-mobile: 42px;
    --home-text-hero-subtitle-mobile: 18px;
    --home-text-input-mobile: 16px;
    --home-text-search-button-mobile: 24px;
    --home-text-section-title-mobile: 26px;

    --home-content-width: 1240px;
    --home-side-padding: 24px;
    --home-side-padding-mobile: 16px;
}

/* 
* ========================================
* COLORS (Dark Scheme)
* ========================================
*/
@media (prefers-color-scheme: dark) {
  :root {
    /* Основные тона */
    --color-background-tone-1: #2E6CB0;  /* Темный фон: темно-синий, мягкий для глаз */
    --color-blank: #1E1E2F;               /* Основной блок: чуть светлее фона */

    /* Акценты */
    --color-accent-1: #4D90FE;  /* Синий для кнопок и важных элементов */
    --color-accent-2: #6EA8D6;  /* Более глубокий синий для hover и вторичных акцентов */
    --color-accent-3: #5AA0D0;  /* Средний синий для фонов элементов и интерактивных состояний */
    --color-accent-4: #8BBCE9;  /* Светлый синий для подсветок */

    /* Цвета для форм */
    --color-input-midtone-1: rgba(255, 255, 255, 0.08); /* Полупрозрачный светлый для input */
    --color-placeholder: rgba(255, 255, 255, 0.5);      /* Лёгкая подсказка в input */
    --color-background-blur: rgba(0, 0, 0, 0.5);        /* Мягкий полупрозрачный blur */

    /* Соцсети */
    --color-vk: #66B0FF;                  /* ВК — мягкий синий */
    --color-yandex: #FF6F61;               /* Яндекс — тёплый красный */
    --color-google-blue: #8AB4F8;          /* Google blue — светлый, не резкий */
    --color-google-red: #F28B82;           /* Google red — мягкий */
    --color-google-yellow: #FDD663;        /* Google yellow — тёплый */
    --color-google-green: #81C995;         /* Google green — мягкий зеленый */

    /* Дополнительные */
    --color-dark: #FF6B6B;                 /* Темно-красный для предупреждений */
    --color-mid: #FF8F87;                  /* Средний акцент для кнопок и выделений */
    --color-base: #2C2C3A;                 /* Основной цвет текста и блоков */

    /*
     * ========================================
     * HOME TOKENS (Dark Scheme)
     * ========================================
     */

    --home-color-background: #101928;
    --home-color-surface: #162235;
    --home-color-surface-soft: #1C2B40;
    --home-color-text: #F2F6FD;
    --home-color-text-muted: #B7C7DD;
    --home-color-border: rgba(139, 188, 233, 0.22);
    --home-color-brand: #4D90FE;
    --home-color-brand-light: #D7E6FF;
    --home-color-overlay: rgba(16, 25, 40, 0.72);
    --home-color-shadow: rgba(0, 0, 0, 0.42);
    --home-color-card-gradient: linear-gradient(
        180deg,
        rgba(22, 34, 53, 0.96) 0%,
        rgba(28, 43, 64, 0.92) 100%
    );
    --home-color-main-top: linear-gradient(
        to bottom,
        #050B1B 0%,
        #0F1B2D 30%,
        #162235 70%,
        #101928 100%
    );
  }
}