/*
 * Единая типографика пользовательских окон и попапов.
 *
 * Прозрачность задаётся альфа-каналом цвета, а не свойством opacity:
 * так дочерние изображения, иконки и кнопки сохраняют свою непрозрачность.
 * Базовые значения рассчитаны на обычный экран, следующие два режима —
 * на узкий портретный экран и на невысокий альбомный экран.
 */

:root {
  --font-ui: "Trebuchet MS", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-system: Arial, Helvetica, sans-serif;

  --text-alpha-solid: 1;
  --text-alpha-primary: 0.96;
  --text-alpha-body: 0.82;
  --text-alpha-secondary: 0.78;
  --text-alpha-muted: 0.64;
  --text-alpha-disabled: 0.48;

  --text-emerald-solid: rgb(120 255 236 / var(--text-alpha-solid));
  --text-emerald-primary: rgb(120 255 236 / var(--text-alpha-primary));
  --text-emerald-body: rgb(120 255 236 / var(--text-alpha-body));
  --text-emerald-secondary: rgb(120 255 236 / var(--text-alpha-secondary));
  --text-emerald-muted: rgb(120 255 236 / var(--text-alpha-muted));
  --text-emerald-disabled: rgb(120 255 236 / var(--text-alpha-disabled));
  --text-white-solid: rgb(255 255 255 / var(--text-alpha-solid));
  --text-white-secondary: rgb(255 255 255 / 0.72);
  --text-black-solid: #000;

  --type-display: clamp(28px, 7vw, 44px);
  --type-page-title: clamp(30px, 5vw, 52px);
  --type-story-title: clamp(22px, 6vw, 30px);
  --type-story-compact-title: 20px;
  --type-story-compact-body: 12px;
  --type-story-tight-title: 16px;
  --type-story-tight-body: 9px;
  --type-modal-title: 25px;
  --type-section-title: 20px;
  --type-body: 16px;
  --type-body-compact: 15px;
  --type-secondary: 13px;
  --type-eyebrow: 12px;
  --type-small: 12px;
  --type-caption: 11px;
  --type-micro: 10px;
  --type-hint: 12px;
  --type-code: 38px;
  --type-button-lg: 17px;
  --type-button-md: 16px;
  --type-button-sm: 14px;
}

@media (max-width: 767px) and (orientation: portrait) {
  :root {
    --type-display: clamp(26px, 8vw, 38px);
    --type-page-title: clamp(27px, 9vw, 38px);
    --type-story-title: clamp(21px, 6vw, 28px);
    --type-modal-title: 22px;
    --type-section-title: 18px;
    --type-body: 15px;
    --type-body-compact: 14px;
    --type-secondary: 12px;
    --type-caption: 10px;
    --type-hint: 11px;
    --type-code: 32px;
    --type-button-lg: 16px;
    --type-button-md: 15px;
    --type-button-sm: 14px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --type-display: clamp(24px, 7vh, 32px);
    --type-page-title: clamp(20px, 5.4vh, 26px);
    --type-story-title: 19px;
    --type-modal-title: 19px;
    --type-section-title: 16px;
    --type-body: 11px;
    --type-body-compact: 11px;
    --type-secondary: 10px;
    --type-eyebrow: 12px;
    --type-small: 10px;
    --type-caption: 9px;
    --type-micro: 8px;
    --type-hint: 10px;
    --type-code: 26px;
    --type-button-lg: 13px;
    --type-button-md: 13px;
    --type-button-sm: 12px;
  }
}