/*
 * Токены по Material Design 3. Прочитано на m3.material.io 2026-11-06.
 * 1 dp = 1 CSS px. Отступы в px: при увеличении текста они не меняются.
 * Шрифты в rem, высота строки без единиц.
 * Цвета задаёт проект: Material определяет роли, значения зависят от бренда.
 */
:root {
  /* Шрифты проекта */
  --font-brand: system-ui, sans-serif;
  --font-plain: system-ui, sans-serif;

  /* Отступы */
  --space-0: 0;
  --space-25: 2px;
  --space-50: 4px;
  --space-75: 6px;
  --space-100: 8px;
  --space-125: 10px;
  --space-150: 12px;
  --space-175: 14px;
  --space-200: 16px;
  --space-250: 20px;
  --space-300: 24px;
  --space-400: 32px;
  --space-450: 36px;
  --space-500: 40px;
  --space-600: 48px;
  --space-700: 56px;
  --space-800: 64px;
  --space-900: 72px;

  /* Поля страницы: 16 на Compact, 24 от Medium */
  --page-margin: var(--space-200);
  --pane-spacer: var(--space-300);

  /* Скругления */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-lg-inc: 20px;
  --radius-xl: 28px;
  --radius-xl-inc: 32px;
  --radius-2xl: 48px;
  --radius-full: 9999px;

  /* Шрифт: вес, размер/строка, семейство */
  --type-display-large: 400 3.5625rem/calc(64 / 57) var(--font-brand);
  --type-display-medium: 400 2.8125rem/calc(52 / 45) var(--font-brand);
  --type-display-small: 400 2.25rem/calc(44 / 36) var(--font-brand);
  --type-headline-large: 400 2rem/calc(40 / 32) var(--font-brand);
  --type-headline-medium: 400 1.75rem/calc(36 / 28) var(--font-brand);
  --type-headline-small: 400 1.5rem/calc(32 / 24) var(--font-brand);
  --type-title-large: 400 1.375rem/calc(28 / 22) var(--font-brand);
  --type-title-medium: 500 1rem/calc(24 / 16) var(--font-plain);
  --type-title-small: 500 0.875rem/calc(20 / 14) var(--font-plain);
  --type-body-large: 400 1rem/calc(24 / 16) var(--font-plain);
  --type-body-medium: 400 0.875rem/calc(20 / 14) var(--font-plain);
  --type-body-small: 400 0.75rem/calc(16 / 12) var(--font-plain);
  --type-label-large: 500 0.875rem/calc(20 / 14) var(--font-plain);
  --type-label-medium: 500 0.75rem/calc(16 / 12) var(--font-plain);
  --type-label-small: 500 0.6875rem/calc(16 / 11) var(--font-plain);

  /* Трекинг */
  --track-display-large: -0.25px;
  --track-title-medium: 0.15px;
  --track-title-small: 0.1px;
  --track-body-large: 0.5px;
  --track-body-medium: 0.25px;
  --track-body-small: 0.4px;
  --track-label-large: 0.1px;
  --track-label-medium: 0.5px;
  --track-label-small: 0.5px;

  /* Состояния */
  --state-hover: 0.08;
  --state-focus: 0.1;
  --state-pressed: 0.1;
  --state-drag: 0.16;
  --state-disabled: 0.38;

  /* Анимация */
  --duration-short-1: 50ms;
  --duration-short-2: 100ms;
  --duration-short-3: 150ms;
  --duration-short-4: 200ms;
  --duration-medium-1: 250ms;
  --duration-medium-2: 300ms;
  --duration-medium-3: 350ms;
  --duration-medium-4: 400ms;
  --duration-long-1: 450ms;
  --duration-long-2: 500ms;
  --duration-long-3: 550ms;
  --duration-long-4: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* Цель нажатия */
  --target-min: 48px;

  /*
   * Цвета: задать в проекте и проверить контраст текста 4.5:1, элементов 3:1.
   * --color-primary, --color-on-primary,
   * --color-primary-container, --color-on-primary-container,
   * --color-secondary, --color-on-secondary,
   * --color-secondary-container, --color-on-secondary-container,
   * --color-tertiary, --color-on-tertiary,
   * --color-error, --color-on-error,
   * --color-surface, --color-on-surface, --color-on-surface-variant,
   * --color-surface-container-lowest, -low, (обычный), -high, -highest,
   * --color-outline, --color-outline-variant,
   * --color-inverse-surface, --color-inverse-on-surface, --color-inverse-primary
   *
   * Тени: задать по одной на уровень. Material даёт высоту, но не значения CSS.
   * --elevation-1 (1dp), --elevation-2 (3dp), --elevation-3 (6dp),
   * --elevation-4 (8dp), --elevation-5 (12dp)
   */
}

/* Брейкпоинты Material: 600, 840, 1200, 1600. В em, чтобы учитывать настройку шрифта браузера. */
@media (min-width: 37.5em) {
  :root {
    --page-margin: var(--space-300);
  }
}

/* Базовые правила */
img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}