:root {

  /* ============================================
     ЦВЕТА — ОСНОВНЫЕ (Brand)
     ============================================ */

  --color-primary: #1E7AD4;            /* основной синий: кнопки, ссылки, чек-иконки */
  --color-primary-dark: #1663AC;       /* hover основного синего */
  --color-primary-darker: #0F4E8C;     /* active / нажатие */
  --color-primary-light: #E8F1FB;      /* светлые синие подложки, бейджи */

  --color-accent: #EE8A33;             /* оранжевый: CTA-кнопки "Запросить предложение" */
  --color-accent-dark: #D67522;        /* hover оранжевого */
  --color-accent-light: #FDEFDF;       /* светлые оранжевые подложки */

  /* ============================================
     ЦВЕТА — ФОНОВЫЕ (Backgrounds)
     ============================================ */

  --color-dark: #0D2140;               /* тёмно-синий: шапка, hero, футер, тёмные секции */
  --color-dark-2: #0A1B33;             /* темнее: нижняя полоса футера, hover тёмных секций */
  --color-dark-3: #132C52;             /* светлее dark: карточки на тёмном фоне, hover */
  --color-dark-overlay: rgba(10, 25, 47, 0.85);  /* затемнение поверх фото в hero */

  --color-bg-light: #F4F6F9;           /* светло-серый фон секций (Производители, Отрасли) */
  --color-bg-white: #FFFFFF;           /* белый: карточки, основа */
  --color-bg-page: #FFFFFF;            /* фон страницы */

  /* ============================================
     ЦВЕТА — ТЕКСТ (Text)
     ============================================ */

  --color-text: #1B2A41;               /* основной текст, заголовки на светлом фоне */
  --color-text-body: #43536B;          /* обычный текст, описания */
  --color-text-muted: #7C8798;         /* второстепенный текст, подписи */
  --color-text-inverse: #FFFFFF;       /* текст на тёмном фоне */
  --color-text-inverse-muted: #A7B4C7; /* приглушённый текст на тёмном фоне */
  --color-text-link: var(--color-primary);

  /* ============================================
     ЦВЕТА — ГРАНИЦЫ И РАЗДЕЛИТЕЛИ
     ============================================ */

  --color-border: #E3E8EF;             /* границы карточек, инпутов */
  --color-border-light: #EDF0F5;       /* лёгкие разделители */
  --color-border-dark: rgba(255, 255, 255, 0.15);  /* границы на тёмном фоне */

  /* ============================================
     ЦВЕТА — СТАТУСЫ
     ============================================ */

  --color-success: #2FA36B;
  --color-warning: #EE8A33;
  --color-error: #E5484D;
  --color-info: var(--color-primary);

  /* ============================================
     ШРИФТЫ (Typography)
     ============================================ */

  --font-family: 'Roboto', 'Open Sans', Arial, 'Helvetica Neue', sans-serif;

  --font-size-xxl: 52px;               /* H1 hero: GEOKAIS.KZ */
  --font-size-xl: 30px;                /* подзаголовок hero */
  --font-size-lg: 24px;                /* заголовки секций (uppercase) */
  --font-size-md: 18px;                /* заголовки карточек-фич, подзаголовки */
  --font-size-base: 16px;              /* базовый текст */
  --font-size-sm: 14px;                /* описания карточек, списки */
  --font-size-xs: 12px;                /* подписи, мелкие пометки */
  --font-size-xxs: 11px;               /* лейблы стран, копирайт */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;            /* H1, логотип */

  --line-height-tight: 1.15;           /* заголовки */
  --line-height-base: 1.5;             /* основной текст */
  --line-height-relaxed: 1.7;          /* длинные описания */

  --letter-spacing-caps: 0.06em;       /* uppercase-заголовки, кнопки, навигация */
  --letter-spacing-wide: 0.12em;       /* мелкие лейблы */

  /* ============================================
     ЗАКРУГЛЕНИЯ (Border radius)
     ============================================ */

  --radius-xs: 3px;                    /* мелкие элементы, бейджи */
  --radius-sm: 4px;                    /* кнопки, инпуты */
  --radius-md: 8px;                    /* карточки товаров, блоки */
  --radius-lg: 12px;                   /* крупные панели (карта географии) */
  --radius-xl: 16px;
  --radius-round: 50%;                 /* круглые иконки, чек-маркеры */
  --radius-pill: 100px;                /* пилюли */

  /* ============================================
     ТЕНИ (Shadows)
     ============================================ */

  --shadow-xs: 0 1px 3px rgba(13, 33, 64, 0.08);
  --shadow-sm: 0 2px 8px rgba(13, 33, 64, 0.08);       /* карточки в покое */
  --shadow-md: 0 6px 18px rgba(13, 33, 64, 0.12);      /* hover карточек, дропдауны */
  --shadow-lg: 0 12px 32px rgba(13, 33, 64, 0.18);     /* модалки, плавающие панели */
  --shadow-btn: 0 4px 12px rgba(30, 122, 212, 0.35);   /* синяя кнопка */
  --shadow-btn-accent: 0 4px 12px rgba(238, 138, 51, 0.35);  /* оранжевая кнопка */

  /* ============================================
     ОТСТУПЫ (Spacing) — шкала 4px
     ============================================ */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;                    /* вертикальные отступы секций */
  --space-12: 100px;

  /* ============================================
     МАКЕТ / СЕТКА (Layout)
     ============================================ */

  --container-width: 1200px;           /* макс. ширина контейнера */
  --container-padding: 20px;           /* боковые отступы контейнера */

  --header-height: 80px;

  --grid-gap: 24px;                    /* расстояние между карточками */
  --grid-columns-products: 4;          /* сетка карточек продукции */
  --grid-columns-brands: 4;            /* сетка производителей */

  --section-padding-y: 80px;           /* вертикальный ритм секций */
  --section-padding-y-sm: 48px;

  /* ============================================
     КНОПКИ (Buttons)
     ============================================ */

  --btn-padding-x: 28px;
  --btn-padding-y: 14px;
  --btn-font-size: 13px;
  --btn-font-weight: var(--font-weight-bold);
  --btn-radius: var(--radius-sm);
  --btn-transition: all 0.3s ease;

  /* ============================================
     ИНПУТЫ (Forms)
     ============================================ */

  --input-padding-x: 14px;
  --input-padding-y: 12px;
  --input-font-size: var(--font-size-sm);
  --input-radius: var(--radius-sm);
  --input-bg: rgba(255, 255, 255, 0.06);       /* инпуты футера на тёмном фоне */
  --input-border: var(--color-border-dark);
  --input-border-focus: var(--color-primary);
  --input-placeholder: var(--color-text-inverse-muted);

  /* ============================================
     ПЕРЕХОДЫ И АНИМАЦИИ (Transitions)
     ============================================ */

  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;        /* стандарт: hover ссылок, кнопок, карточек */
  --transition-slow: 0.5s ease;
  --transition-transform: transform 0.3s ease;

  /* ============================================
     Z-INDEX (Слои)
     ============================================ */

  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-overlay: 400;
  --z-index-modal: 500;
  --z-index-modal-high: 600;

  /* ============================================
     ПРОЧЕЕ
     ============================================ */

  --opacity-disabled: 0.5;

  --check-icon-size: 18px;             /* круглые чек-иконки в списках преимуществ */

  --icon-stroke-width: 2px;            /* линейные иконки отраслей */

  --header-link-color: var(--color-text-inverse);
  --header-link-active: var(--color-primary);
  --header-link-underline: 2px solid var(--color-primary);
}