/*
 * Біржа ↔ дизайн-система ТАТ: база (SPEC-T81).
 *
 * Підключається після ds/tokens.css і ds/fonts.css, перед components.css. Усе діє лише під `html.theme-tat`,
 * щоб не зачепити адмінку EasyAdmin, листи й лендинг. Токени — з ds/tokens.css (генерований; не редагувати),
 * тут — лише похідні змінні `--ds-*` і мінімальна типографіка.
 * Довідник: docs/sdd/specs/SPEC-T81-design-system/ds-guide.md
 */

html.theme-tat {
  /* font-family зі сторібука (Foundation/Typography) */
  --ds-font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
  /* Колір підписів полів у CRM (#828282) — окремого токена в ДС немає, значення виміряно в робочій CRM. */
  --ds-color-label: #828282;
  /* Тінь поповера: у CRM виміряно 0 4px 12px rgba(39,40,43,.12) — це токен --box-shadow-hint. */
  --ds-shadow-popover: var(--box-shadow-hint);
  /* Брендовий колір теми (tat: #457fef) і його hover — з токенів теми. */
  --ds-brand: var(--color-main);
  --ds-brand-hover: var(--btn-bg-2-hover);
  /* Висоти контролів */
  --ds-control-height: var(--size-36);
  --ds-control-height-lg: var(--size-40);
  --ds-control-height-sm: var(--size-32);
  /* Поля сторінки кабінету (шапка, заголовок, вміст, підвал): 20px на мобільному, 40px від 768px; ширина вмісту — 1366px */
  --ds-page-gutter: var(--size-20);
  --ds-page-max: 1366px;
}

@media (min-width: 768px) {
  html.theme-tat {
    --ds-page-gutter: var(--size-40);
  }
}

html.theme-tat body {
  margin: 0;
  font-family: var(--ds-font-family);
  font-size: var(--font-size-14);
  line-height: var(--line-height-1-43);
  color: var(--text-primary);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Скид браузерних стилів контролів форм: шрифт і розмір успадковуються від сторінки (раніше це робив Bootstrap 2) */
html:where(.theme-tat) :is(button, input, select, textarea) {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
}

html:where(.theme-tat) img {
  max-width: 100%;
  border: 0;
  vertical-align: middle;
}

/*
 * Посилання (Controls/Link): колір бренду теми, без підкреслення (при наведенні — з підкресленням). Специфічність навмисно
 * мінімальна (0,0,2), щоб не перебивати класи компонентів (шапка, вкладки, кнопки-посилання); для посилань ДС є .ds-link.
 */
html:where(.theme-tat) a {
  color: var(--color-main);
  text-decoration: none;
}

html:where(.theme-tat) a:hover {
  text-decoration: underline;
}

/* Заголовки (Foundation/Typography): h1 24/700, h2 20/700 — теж із мінімальною специфічністю (класи сторінок сильніші) */
html:where(.theme-tat) h1 {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-25);
}

html:where(.theme-tat) h2 {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-25);
}

/* Класи-аналоги для довільного тегу */
html.theme-tat .ds-h1 {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-25);
  color: var(--text-primary);
  margin: 0;
}

html.theme-tat .ds-h2 {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-25);
  color: var(--text-primary);
  margin: 0;
}

html.theme-tat .ds-h3 {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-25);
  color: var(--text-primary);
  margin: 0;
}

html.theme-tat .ds-text-secondary { color: var(--text-secondary); }
html.theme-tat .ds-text-tertiary { color: var(--color-text-tertiary); }
html.theme-tat .ds-text-small { font-size: var(--font-size-12); line-height: var(--line-height-1-33); }

/* Допоміжний клас: візуально прихований текст для скрінрідерів */
html.theme-tat .ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * box-sizing: border-box — лише для компонентів ДС (не глобально, щоб не змінювати розміри блоків розкладки, які їх не мають).
 */
html.theme-tat [class^="ds-"],
html.theme-tat [class*=" ds-"],
html.theme-tat [class^="ds-"]::before,
html.theme-tat [class*=" ds-"]::before,
html.theme-tat [class^="ds-"]::after,
html.theme-tat [class*=" ds-"]::after {
  box-sizing: border-box;
}