/* ============================================================
   ГАРАНТИЯ ХОЛОДА. Дизайн-система v1.
   Токены по STANDARDS/01_TOKENS.md. Токен это роль, не значение.
   Все контрасты проверены расчётом на WCAG AA, отчёт в design-system.md.

   Направление. Медь и сталь.
   Медь это материал фреоновой трассы и пайки, то есть предмет работы.
   Сталь и графит это техника и холод.
   Голубого нет намеренно, в него ушли все 12 разобранных конкурентов.
   ============================================================ */

:root {

  /* ---------- 1. Цвет. Семантические роли ---------- */

  /* текст */
  --ink:          #191d20;   /* основной, 15.8:1 к bg */
  --ink-2:        #384247;   /* второстепенный заголовок, 9.6:1 */
  --muted:        #5c666b;   /* подписи, 5.5:1 к bg. Важное сюда не прячем */

  /* поверхности */
  --bg:           #f6f7f7;   /* фон страницы, холодный почти белый */
  --surface:      #ffffff;   /* карточки и панели */
  --surface-2:    #eceeef;   /* утопленные зоны, таблицы */

  /* линии */
  --line:         #cdd2d4;   /* мягкие разделители внутри блока */
  --line-strong:  #868e92;   /* структурные границы, 3.1:1 к bg */

  /* акцент. Медь */
  --accent:       #a85833;
  --accent-ink:   #ffffff;   /* на акценте, 5.1:1 */
  --accent-hover: #8f4828;   /* наведение и нажатие, 6.7:1 под белым */
  --accent-weak:  #faf2ed;   /* подложка. Текст на ней только --accent, 4.6:1 */

  /* вторичный акцент. Сталь-холод. Только для смысловых меток, не для CTA */
  --cold:         #2c5b62;
  --cold-weak:    #e6eef0;

  /* статусы */
  --danger:       #a3311f;
  --success:      #2c6e49;
  --warning:      #8a6510;

  /* фокус. Отдельная роль, всегда виден */
  --focus:        #2c5b62;   /* 7.0:1 к bg */

  /* ---------- 2. Типографика ---------- */

  /* Geologica. Свободная лицензия SIL OFL, полноценная кириллица,
     технический характер. Проверены Ж К Д № Ъ Ы Ё.
     PT Mono. Свободная, Paratype. Роль цифр, кодов, подписей.
     Graphik LCG из гипотезы v0 снят, он коммерческий и на публичный
     сайт без платной веб-лицензии его ставить нельзя. */
  --font-display: "Geologica", "Helvetica Neue", sans-serif;
  --font-text:    "Geologica", "Helvetica Neue", sans-serif;
  --font-mono:    "PT Mono", ui-monospace, monospace;

  /* Модульная шкала, коэффициент около 1.25.
     Крупные ступени через clamp с обязательными границами, не голый vw. */
  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.35rem);
  --text-3xl:  clamp(2.2rem, 1.6rem + 2.8vw, 3.2rem);
  --text-4xl:  clamp(2.6rem, 1.7rem + 4.2vw, 4.4rem);

  --leading-tight:  1.12;   /* крупные заголовки */
  --leading-snug:   1.28;   /* средние заголовки */
  --leading-normal: 1.55;   /* текст. Кириллице нужно чуть больше воздуха */

  --tracking-tight:  -0.02em;  /* только для крупного, не для текста */
  --tracking-normal: 0;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* ---------- 3. Spacing. База 4px ---------- */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Вертикальный ритм секций. Намеренно РАЗНЫЙ по смыслу.
     Идеально ровные отступы везде это примета шаблона. */
  --section-tight: clamp(2.5rem, 5vw, 4rem);
  --section-base:  clamp(3.5rem, 7vw, 6rem);
  --section-loose: clamp(4.5rem, 9vw, 8rem);

  --container:        72rem;
  --container-narrow: 44rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* ---------- 4. Радиус. Один словарь на весь сайт ---------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;   /* только настоящие кнопки, не бейджи */

  /* ---------- 5. Тень. Сдержанно ---------- */
  /* Разделение делают граница и контраст, а не свечение.
     shadow-2 только для поднятых слоёв, не для каждой карточки. */

  --shadow-1: 0 1px 2px rgba(25, 29, 32, 0.06);
  --shadow-2: 0 8px 24px rgba(25, 29, 32, 0.10);

  /* ---------- 6. Motion ---------- */

  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- 7. Z-index. Именованная шкала ---------- */

  --z-base:     0;
  --z-sticky:   100;
  --z-header:   200;
  --z-dropdown: 300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ============================================================
   Тёмная тема в первой версии не делается.
   Причина. Это аварийный сайт, человек проводит на нём меньше минуты,
   а вторая тема удваивает работу по цвету и проверке.
   Все роли заведены так, что тема добавляется переопределением
   этого блока, без правок в компонентах.

   :root[data-theme="dark"] { --ink: ...; --bg: ...; }
   ============================================================ */

/* ============================================================
   Базовые правила. Кириллица и читаемость.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);   /* отрицательный трекинг в тексте запрещён */
  -webkit-font-smoothing: antialiased;
}

/* Длинные русские слова не должны вылезать из своих колонок */
h1, h2, h3, h4, p, li, a, button, td, th, dt, dd {
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  margin: 0;
}

h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: -0.01em; }
h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-lg); line-height: var(--leading-snug); }

p { margin: 0; max-width: 68ch; }   /* мера строки, комфорт 45-75 символов */

/* Цифры в таблицах и ценах не должны прыгать */
table, .num, .price { font-variant-numeric: tabular-nums; }

/* Фокус виден всегда и не только цветом */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Сетки. Без этого длинные слова рвут раскладку */
.grid > *, .flex > * { min-width: 0; }

img { max-width: 100%; height: auto; }

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

/* ============================================================
   ВНИМАНИЕ ПЕРЕД СБОРКОЙ.
   Здесь шрифты подключаются по имени и работают потому, что
   установлены в системе. Для прода нужны файлы в assets/fonts/
   и блок @font-face с font-display: swap и сабсетом кириллицы.
   Geologica берётся с Google Fonts, лицензия SIL OFL.
   PT Mono оттуда же, лицензия свободная.
   ============================================================ */