/* Montserrat Regular */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-regular.woff2') format('woff2'),
       url('../fonts/montserrat-regular.woff') format('woff');
}

/* Montserrat Bold */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-bold.woff2') format('woff2'),
       url('../fonts/montserrat-bold.woff') format('woff');
}

:root {
  /* 🎨 Цвета */
  --color-bg: #0d1029;               /* Основной тёмный фон */
  --color-bg-light: #1c1f3a;         /* Светлый фон элементов */
  --color-light-bg: #ffffff;         /* Светлый фон */
  --color-text: #000000;             /* Базовый текст */
  --color-muted: #a0a0a0;            /* Вторичный текст */
  --color-accent: #ff8a00;           /* Оранжевый акцент */
  --color-accent-alt: #a14ef0;       /* Фиолетовый акцент */
  --color-gradient-1: linear-gradient(45deg, #ff7e5f, #feb47b); /* Оранжевый градиент */
  --color-gradient-2: linear-gradient(45deg, #a18cd1, #fbc2eb); /* Фиолетовый градиент */
  --color-bg-rgb: 13, 16, 41;
  --color-muted-rgba-20: rgba(160, 160, 160, 0.2);

  /* 🧱 Размеры */
  --font-base: 16px;
  --font-lg: 20px;
  --icon-size: 24px;
  --border-radius: 12px;
  --padding-base: 16px;
  --padding-lg: 24px;
  --container-width: 1200px;

  /* ⚡ Анимации */
  --transition-fast: 0.2s ease-in-out;
  --transition-medium: 0.4s ease;
  --transition-slow: 0.6s ease;

  /* ✍️ Типографика */
  --font-main: 'Montserrat', sans-serif;
  --line-height: 1.3;

  --h1-size: 50px;
  --h2-size: 36px;
  --h3-size: 28px;
  --h4-size: 22px;
  --h5-size: 18px;
  --h6-size: 16px;
}

@media (max-width: 1024px) {
  :root {
    --font-base: 15px;
    --h1-size: 40px;
    --h2-size: 30px;
    --h3-size: 24px;
    --h4-size: 20px;
    --h5-size: 17px;
    --h6-size: 15px;
  }
}
@media (max-width: 768px) {
  :root {
    --font-base: 14px;
    --h1-size: 35px;
    --h2-size: 24px;
    --h3-size: 20px;
    --h4-size: 18px;
    --h5-size: 16px;
    --h6-size: 14px;
  }
}