/* ==========================================================================
   TOKENS.CSS — дизайн-токени проєкту Huemachine
   Підключається ПЕРШИМ, до styles.css
   ==========================================================================

   ВІДПОВІДНІСТЬ СТИЛІВ FIGMA → КЛАС У CSS
   --------------------------------------------------------------------------
   DM Sans/H0            → .dm-h0
   DM Sans/H1             → .dm-h1
   DM Sans/H2             → .dm-h2
   DM Sans/H3 (Крок 213)  → .dm-h3
   Tablet/H3 (privacy-policy.html, Tablet Portrait) → .dm-24-reg-h3 (окремий
   від .dm-24-reg/Mob-H2: та сама 24px, але line-height 30px/letter-spacing 0,
   а не 130%/0 у .dm-24-reg)
   Tablet/H1              → .dm-36-reg
   Tablet/H2              → .dm-30-reg
   Mob/H1 (Крок 177)      → .dm-28-reg
   Mob/H2 (Крок 178)      → .dm-24-reg
   DM Sans/22 Reg         → .dm-22-reg
   DM Sans/20 Reg         → .dm-20-reg
   DM Sans/Description    → .dm-desc
   DM Sans/18 Reg         → .dm-18-reg
   DM Sans/17 Light       → .dm-17-light
   DM Sans/16 Reg         → .dm-16-reg
   DM Sans/16 Light       → .dm-16-light
   DM Sans/16 Light body (Крок 213, окремий від .dm-16-light —
   16/22 vs 16/24)        → .dm-16-light-body
   DM Sans/16 Semibold (privacy-policy.html, ті самі метрики, що
   16 Light body, інша вага) → .dm-16-semibold
   DM Sans/15 Light Italic → .dm-15-light-italic
   DM Sans/14 Reg         → .dm-14-reg
   DM Sans/14 Light       → .dm-14-light
   DM Sans/13 Light Italic → .dm-13-light-italic
   DM Sans/12 Light       → .dm-12-light

   Red Hat/16 SB (lineheight) → .rh-16-sb-lh
   Red Hat/16 SB              → .rh-16-sb
   Red Hat/16 Reg              → .rh-16-reg
   Red Hat/14 SB                → .rh-14-sb
   Red Hat/12 Bold               → .rh-12-bold
   Red Hat/12 Bold (tracking)    → .rh-12-bold-track
   Red Hat/11 Bold                → .rh-11-bold

   Red Hat/10 Bold — Крок (глобальна ревізія стилів): видалено як окремий
   стиль, замінено на Red Hat/12 Bold (tracking) (.rh-12-bold-track) усюди,
   де застосовувався (номери пунктів навігації в мобільному/планшетному
   меню-оверлеї). Фікс (Mobile, contact.html): відновлено як ВИНЯТОК —
   .red-hat-10-bold — ЄДИНЕ місце застосування — лейбли метрик секції
   Offices-stats на contact.html, Mobile (.contact-stats__label)

   Mob/H1                 → .mob-h1 (застосовується автоматично до .dm-h1 на мобільному)
   Mob/H2                 → .mob-h2 (застосовується автоматично до .dm-h2 на мобільному)
   ========================================================================== */

:root {
  /* Фон */
  --color-background: #111111;

  /* Greyscale */
  --grey-100: #EEEEEE;
  --grey-60: #B6B6B6;
  --grey-55: #A4A4A4;
  --grey-50: #7E7E7E;
  --grey-20: #252525;
  --grey-15: #1D1D1D;
  --grey-10: #181818;
  --grey-5: #161616;

  /* Секондарі-кнопки (Крок 103) — окремі відтінки лише для їхніх
     pressed/disabled станів тексту, не використовуються деінде */
  --grey-additional-pressed: #C2C2C2;
  --grey-additional-disabled: #808080;

  /* Primary */
  --primary-100: #FAAD08;
  --primary-pressed: #D69407;

  /* Семантичні кольори — Крок 116: помилки валідації форми (email) */
  --semantic-error: #F16542;

  /* CTA-кнопки (Крок 100) — hover/pressed фон .cta-button, 135deg = з
     лівого верхнього кута в правий нижній */
  --primary-grad-yellow-red: linear-gradient(
    135deg,
    #FA5108 0%,
    #F88C19 15%,
    #FAAD08 50%,
    #F88C19 85%,
    #FA5108 100%
  );
  --primary-grad-yellow-red-pressed: linear-gradient(
    135deg,
    #FA5108 0%,
    #F88C19 25%,
    #FAAD08 50%,
    #F88C19 75%,
    #FA5108 100%
  );
  --primary-disabled: #855F0D;

  /* Кут primary-градієнта винесено окремо, щоб змінювати напрямок в одному місці */
  --primary-grad-angle: 90deg;
  --primary-grad: linear-gradient(
    var(--primary-grad-angle),
    #643957 0%,
    #8C3765 10%,
    #F88C19 30%,
    #FEC663 50%,
    #F88C19 70%,
    #8C3765 90%,
    #643957 100%
  );

  /* Вужчий варіант — довші плоскі темні краї (15%/85%), той самий кут,
     що й --primary-grad, керується централізовано через --primary-grad-angle */
  --primary-grad-narrow: linear-gradient(
    var(--primary-grad-angle),
    #111111 15%,
    #6F1E6A 25%,
    #F88C19 35%,
    #FEC663 50%,
    #F88C19 65%,
    #6F1E6A 75%,
    #111111 85%
  );

  /* Строук виділеного пункту в дропдаунах фільтрів (Крок 108) — вертикальний,
     180deg (згори вниз), на відміну від --primary-grad/--primary-grad-narrow
     (горизонтальні, кут через --primary-grad-angle) */
  --primary-grad-dropdown: linear-gradient(
    180deg,
    #111111 0%,
    #6F1E6A 15%,
    #F88C19 35%,
    #FEC663 50%,
    #F88C19 65%,
    #6F1E6A 85%,
    #111111 100%
  );

  /* Лівий строук активного айтема в табличці Services на десктопі
     (.services-table__row--item.is-active::before, styles.css) —
     вертикальний, той самий принцип, що --primary-grad-dropdown, але
     власна кольорова специфікація (усі стопи 100% opacity) */
  --primary-grad-services: linear-gradient(
    to bottom,
    #181818 10%,
    #8C3765 20%,
    #F88C19 40%,
    #FEC663 50%,
    #F88C19 60%,
    #8C3765 80%,
    #181818 90%
  );

  /* Радіальна пляма для hover/pressed primary-кнопок (Крок 39) — --grad-x/
     --grad-y/--grad-size задає кожен стан окремо (--grad-size — розмір
     плями, підставляється там, де токен використовується; фолбек 100px,
     якщо не задано). Останній стоп "transparent 100%" навмисний: без нього
     #9821AB тягнувся б і за межі кнопки, з ним градієнт різко обривається
     на своїй межі, і крізь неї видно базовий --primary-100 */
  --primary-grad-radial: radial-gradient(
    circle var(--grad-size, 100px) at var(--grad-x, 50%) var(--grad-y, 50%),
    #FFCB77 0%,
    #FAAD08 48%,
    #FA5108 67%,
    #9821AB 100%,
    transparent 100%
  );

  /* Шрифти */
  --font-dm-sans: 'DM Sans', sans-serif;
  --font-red-hat: 'Red Hat Display', sans-serif;

  /* Колір колонок сітки-оверлею (однаковий для десктоп/таблет/мобайл) */
  --grid-overlay-color: rgba(255, 0, 0, 0.1);

  /* Easing для scroll-reveal анімацій */
  --ease-smooth: cubic-bezier(.25, .46, .45, .94);
}

/* Самостійний хостинг шрифтів — 0 зовнішніх запитів до Google Fonts.
   DM Sans та Red Hat Display — варіативні шрифти: Google віддає той самий
   .woff2 під кілька font-weight (браузер інтерполює через wght-вісь), тому
   dm-sans-light/regular та всі три red-hat-display-* файли побайтово
   ідентичні — це очікувано, а не помилка копіювання. */
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dm-sans-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dm-sans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Той самий variable-font файл (wght 100–1000), зареєстрований під вагою
   600 — той самий принцип, що light/regular вище: браузер інтерполює
   Semibold через wght-вісь, окремого файлу не потрібно (Крок
   privacy-policy, .dm-16-semibold) */
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dm-sans-regular.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('../assets/fonts/red-hat-display-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('../assets/fonts/red-hat-display-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('../assets/fonts/red-hat-display-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   БРЕЙКПОІНТИ (довідково — макети: Desktop 1920, Tablet 1280, Mobile 375)

   Desktop: ≥1281px   — контент max-width 1920px, центрується на ширших екранах
   Tablet:  768px–1280px
   Mobile:  ≤767px
   ========================================================================== */

/* ==========================================================================
   ТЕКСТОВІ СТИЛІ — DM Sans
   ========================================================================== */

.dm-h0 {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -0.01em;
}

.dm-h1 {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 48px;
  line-height: 52px;
  letter-spacing: 0em;
}

.dm-h2 {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 40px;
  line-height: 46px;
  letter-spacing: 0em;
}

/* Крок 213 — privacy-policy.html, тайтли контентних секцій ("Introduction",
   "What personal data we collect") */
.dm-h3 {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0em;
}

/* Tablet/H3 — Крок, тайтли контентних секцій privacy-policy.html на
   Tablet Portrait (768–1023px). Окремий від .dm-24-reg (Mob/H2, нижче) —
   та сама 24px, але 24/30 (line-height 30px, не 130%≈31.2px) і
   letter-spacing 0 (той самий, збігається, але явно, не залежить від
   майбутніх правок .dm-24-reg) */
.dm-24-reg-h3 {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0em;
}

/* Tablet/H1 — Крок 156, hero-тайтл на Tablet Portrait (768–1023px) */
.dm-36-reg {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: 0em;
}

/* Tablet/H2 — Крок 157, тайтл секції Services на Tablet Portrait (768–1023px) */
.dm-30-reg {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: 0em;
}

/* Mob/H1 — Крок 177, hero-тайтл на Mobile (≤767px). Ті самі значення, що
   .mob-h1 вище, але як явний DM Sans-утиліті-клас (той самий підхід, що
   Tablet/H1 → .dm-36-reg) — .mob-h1 лишається довідковим, у розмітці/
   стилях не застосовується */
.dm-28-reg {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 28px;
  line-height: 120%;
  letter-spacing: -0.01em;
}

/* Mob/H2 — Крок 178, тайтл секції Services на Mobile (≤767px). Ті самі
   значення, що .mob-h2 вище, але як явний DM Sans-утиліті-клас (той самий
   підхід, що .dm-28-reg/Mob-H1) — .mob-h2 лишається довідковим */
.dm-24-reg {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 130%;
  letter-spacing: 0em;
}

.dm-22-reg {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: 0.02em;
}

.dm-20-reg {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.02em;
}

/* Description text */
.dm-desc {
  font-family: var(--font-dm-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0em;
}

.dm-18-reg {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0em;
}

.dm-17-light {
  font-family: var(--font-dm-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 0em;
}

.dm-16-reg {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 41px;
  letter-spacing: 0em;
}

.dm-16-light {
  font-family: var(--font-dm-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0em;
}

/* Крок 213 — privacy-policy.html боді-текст. Окремий від .dm-16-light
   (16/22) — навмисно НЕ перевикористовує/не замінює той стиль, бачить
   власну line-height (16/24) для довгого юридичного тексту */
.dm-16-light-body {
  font-family: var(--font-dm-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0em;
}

/* Ті самі метрики, що .dm-16-light-body, лише Semibold — виділені
   слова/фрази всередині боді-тексту (privacy-policy.html); колір
   успадковується від навколишнього тексту, тому тут не заданий */
.dm-16-semibold {
  font-family: var(--font-dm-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0em;
}

/* Крок — Mobile (≤767px), privacy-policy.html + terms-of-service.html:
   ті самі метрики, що .dm-14-light-body (14/22), лише Semibold —
   виділені слова/фрази всередині боді-тексту на цьому breakpoint
   (замінює .dm-16-semibold там же, той самий "перевизначити напряму
   на компонентному/утиліті-класі в @media" прийом — див. styles.css) */
.dm-14-semibold {
  font-family: var(--font-dm-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0em;
}

.dm-15-light-italic {
  font-family: var(--font-dm-sans);
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0em;
}

.dm-14-reg {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0em;
}

.dm-14-light {
  font-family: var(--font-dm-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0em;
}

/* Крок — privacy-policy.html боді-текст, Mobile (≤767px). Окремий від
   .dm-14-light (14/20) і .dm-16-light-body (16/24) — власна line-height
   (14/22) під довгий юридичний текст на вузькому екрані, той самий
   "не перевикористовує/не замінює" принцип, що .dm-16-light-body вище */
.dm-14-light-body {
  font-family: var(--font-dm-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0em;
}

.dm-13-light-italic {
  font-family: var(--font-dm-sans);
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0em;
}

.dm-12-light {
  font-family: var(--font-dm-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0em;
}

/* ==========================================================================
   ТЕКСТОВІ СТИЛІ — Red Hat Display
   ========================================================================== */

/* "16 SB (lineheight)" */
.rh-16-sb-lh {
  font-family: var(--font-red-hat);
  font-weight: 600;
  font-size: 16px;
  line-height: 34px;
  letter-spacing: 0.12em;
}

.rh-16-sb {
  font-family: var(--font-red-hat);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.12em;
}

.rh-16-reg {
  font-family: var(--font-red-hat);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.02em;
}

/* Окремий leading-варіант — 16/34, LS 2% (використовується в
   .industry-row__tags) */
.rh-16-reg-height {
  font-family: var(--font-red-hat);
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  letter-spacing: 0.02em;
}

.rh-14-sb {
  font-family: var(--font-red-hat);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.12em;
}

.rh-12-bold {
  font-family: var(--font-red-hat);
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.06em;
}

/* "12 Bold (tracking)" */
.rh-12-bold-track {
  font-family: var(--font-red-hat);
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.13em;
}

.rh-11-bold {
  font-family: var(--font-red-hat);
  font-weight: 700;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 0.07em;
}

/* "10 Bold" — відновлено як виняток, лише для .contact-stats__label
   (contact.html, Mobile); не використовувати більше ніде (див. коментар
   у шапці файлу) */
.red-hat-10-bold {
  font-family: var(--font-red-hat);
  font-weight: 700;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: 0.13em;
}

/* ==========================================================================
   ТЕКСТОВІ СТИЛІ — Mob (line-height у %, не в px)
   ========================================================================== */

.mob-h1 {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 28px;
  line-height: 120%;
  letter-spacing: -0.01em;
}

.mob-h2 {
  font-family: var(--font-dm-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 130%;
  letter-spacing: 0em;
}

/* На мобільному брейкпоінті .dm-h1/.dm-h2 автоматично стають Mob/H1, Mob/H2,
   щоб не міняти класи в розмітці вручну */
@media (max-width: 767px) {
  .dm-h1 {
    font-size: 28px;
    line-height: 120%;
    letter-spacing: -0.01em;
  }

  .dm-h2 {
    font-size: 24px;
    line-height: 130%;
    letter-spacing: 0em;
  }
}