/* IT Liga — фирменные токены. Единственный источник правды по цвету, шрифту и базовым компонентам. */

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/Manrope-cyrillic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/Manrope-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

:root {
  /* Акцент */
  --itl-purple: #8A3BFC;        /* логотип IT, стрелка, CTA, ссылки, активные состояния */
  --itl-purple-hover: #7532D6;  /* наведение на основную кнопку, темный акцент */
  --itl-purple-border: #C49DFD; /* hover контурных кнопок, мягкие разделители */

  /* Фиолетовые подложки */
  --itl-purple-soft: #F9F5FF;   /* инфоблоки, карточки, вторичные панели */
  --itl-purple-soft-2: #F3EBFF; /* выделение строки, подложки калькулятора */
  --itl-purple-wash: #F6EFFF;   /* большие фоновые секции */

  /* Нейтральные */
  --itl-black: #1A1A1A;         /* заголовки, ключевые числа, важный текст */
  --itl-graphite: #404040;      /* слово Liga, нейтральная графика */
  --itl-text: #4D4D4D;          /* абзацы и пояснения */
  --itl-muted: #757575;         /* вторичные подписи, хлебные крошки (не использовать на --itl-purple-soft — WCAG fail) */
  --itl-muted-on-soft: #6B6B6B; /* подписи на фиолетовых подложках — контраст ≥4.5:1 */
  --itl-line: #D7D7D7;          /* таблицы, аккордеоны, поля */
  --itl-line-2: #CCCCCC;        /* более заметные разделители */
  --itl-panel: #F5F5F5;         /* карточки кейсов, нейтральные блоки */
  --itl-footer: #212121;        /* финальные/контактные блоки */
  --itl-white: #FFFFFF;

  /* Статусы (использовать дозированно) */
  --itl-error: #F04438;         /* ошибка или риск */
  --itl-error-soft: #FEF3F2;   /* фон callout риска */
  --itl-ok: #12B76A;            /* подтверждение, "входит в пакет" */
  --itl-ok-soft: #ECFDF3;      /* фон callout гарантии */

  /* Прозрачный фиолетовый (для фото-диагоналей, оверлеев) */
  --itl-purple-a18: rgba(138, 59, 252, 0.18); /* мягкий оверлей поверх фото */
  --itl-purple-a24: rgba(138, 59, 252, 0.24); /* диагональный акцент на hero */

  /* Типографика */
  --itl-font: "Manrope", Arial, sans-serif;

  /* Геометрия бренда: прямые углы, дозированные мягкие тени */
  --itl-radius: 0px;
  --itl-line-thin: 1px;
  --itl-line-bold: 2px;
  --itl-shadow-card: 0 12px 20px rgba(16, 24, 40, 0.06), 0 4px 6px -2px rgba(16, 24, 40, 0.03);

  /* Кнопки */
  --itl-button-height: 60px;
  --itl-button-padding-x: 40px;

  /* Сетка контента сайта (для веб-материалов) */
  --itl-content-max: 1200px;
  --itl-page-margin: 20px;
  --itl-section-gap-desktop: 96px;
  --itl-section-gap-mobile: 64px;
}

/* --- Базовая типографика --- */
.itl-eyebrow {
  color: var(--itl-purple);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.itl-small-label {
  color: var(--itl-muted);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Кнопки --- */
.itl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--itl-button-height);
  padding: 0 var(--itl-button-padding-x);
  border: var(--itl-line-bold) solid var(--itl-purple);
  border-radius: var(--itl-radius);
  background: var(--itl-purple);
  color: var(--itl-white);
  font-family: var(--itl-font);
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.itl-button:hover {
  background: var(--itl-purple-hover);
  border-color: var(--itl-purple-hover);
}

.itl-button:focus-visible {
  outline: 3px solid var(--itl-purple-border);
  outline-offset: 3px;
}

.itl-button:disabled,
.itl-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.itl-button--empty {
  background: var(--itl-white);
  color: var(--itl-black);
  font-weight: 600;
}

.itl-button--empty:hover {
  background: var(--itl-white);
  border-color: var(--itl-purple-border);
}

/* --- Подпись / мета-текст --- */
.itl-caption {
  color: var(--itl-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Ссылка с пунктирным подчеркиванием (паттерн "Подробнее ››") --- */
.itl-link {
  color: var(--itl-purple);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--itl-purple-border);
  padding-bottom: 2px;
}

/* --- Фирменная стрелка --- */
.itl-arrow {
  display: inline-block;
  width: 52px;
  height: 45px;
  background: url("../assets/arrow.svg") center / contain no-repeat;
  flex: none;
}

/* --- Фирменная линия-разделитель --- */
.itl-rule {
  width: 76px;
  height: 6px;
  background: var(--itl-purple);
  border: 0;
}

/* --- Иконки (assets/icons/*.svg) ---
   Использование: <img class="itl-icon" src="../assets/icons/monitor.svg" alt="Компьютер">
   Доступные: monitor · server · wifi · shield · headset · clock · chart-bar · settings · backup
   Правила: только line-style, stroke #8A3BFC, 24×24 или 48×48 (кратно 24). */
.itl-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: none;
}
.itl-icon--md { width: 32px; height: 32px; }
.itl-icon--lg { width: 48px; height: 48px; }

/* Иконка в цветном круге (для карточек и списков) */
.itl-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--itl-purple-soft);
  flex: none;
}
.itl-icon-wrap--accent {
  background: var(--itl-purple);
}
.itl-icon-wrap--accent .itl-icon {
  filter: brightness(0) invert(1); /* иконка становится белой */
}