/* Дизайн-токены студии.
   Цвет, шрифт, размер, отступ и радиус заданы один раз здесь.
   Палитра ровно из шести токенов: пять нейтральных и один акцент. */

:root {
  color-scheme: dark;

  /* Цвет */
  --ink: #0E1012;
  --panel: #14181A;
  --rule: #2B3134;
  --text: #ECE9E1;
  --muted: #9BA1A0;
  --accent: #E5532D;

  /* Шрифты */
  --font-sans: "IBM Plex Sans", "Noto Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;

  /* Шкала шрифтов */
  --fs-h1: clamp(2.6rem, 6vw, 5rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 2.5rem);
  --fs-h3: clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.125rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.8125rem;
  --fs-label: 0.75rem;
  --fs-micro: 0.6875rem;
  --fs-wordmark: 1rem;
  --fs-wordmark-sm: 0.875rem;
  --fs-menu: 1.5rem;

  /* Интерлиньяж, трекинг, длина строки */
  --lh-h1: 1.02;
  --lh-heading: 1.12;
  --lh-tight: 1.3;
  --lh-body: 1.6;
  --tracking-heading: -0.018em;
  --tracking-label: 0.09em;
  --measure: 68ch;

  /* Сетка и вертикальный ритм */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --col-gap: clamp(1rem, 2vw, 1.75rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --block-gap: clamp(1.75rem, 3vw, 2.75rem);

  /* Отступы, шаг 4px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;

  /* Элементы управления */
  --rule-w: 1px;
  --border: var(--rule-w) solid var(--rule);
  --radius: 2px;
  --tap: 44px;
  --tap-min: 1.5rem;
  --focus: 2px solid var(--accent);
  --focus-offset: 2px;
  --dur: 150ms;
  --ease: linear;
}

/* Большие экраны: контейнер и основной текст чуть шире,
   чтобы страница не выглядела островом в центре монитора. */
@media (min-width: 1600px) {
  :root {
    --maxw: 1400px;
  }
}

@media (min-width: 2000px) {
  :root {
    --maxw: 1520px;
    --fs-body-lg: 1.1875rem;
  }
}

/* Очень узкие экраны (складные телефоны): меньше поля, компактная шапка. */
@media (max-width: 359px) {
  :root {
    --gutter: 1rem;
    --fs-h1: clamp(2.2rem, 11vw, 2.6rem);
  }
}