/*
 * Motrax — система токенов.
 *
 * Цвета взяты с флага ОАЭ, но не в лоб. Красный и зелёный дополнительны:
 * рядом в равной насыщенности они дают светофор. Поэтому зелёный уходит
 * в почти-чёрный и перестаёт читаться как зелёный вовсе — он становится
 * конструктивом: в тёмной теме это фон, в светлой текст. Красный остаётся
 * единственным хроматическим акцентом в обеих. Чистый зелёный живёт только
 * в смысловых метках вроде «в наличии», маленькими площадями. Так красный
 * ни в одном месте не соприкасается с насыщенным зелёным.
 *
 * Тёмная схема — исходная и фирменная, светлая включается выбором человека.
 * Системную настройку намеренно не спрашиваем: у сайта есть свой вид,
 * и он не должен зависеть от того, как у посетителя настроена операционная
 * система. Выбор запоминается и применяется до первой отрисовки.
 *
 * Заливка акцента и акцентный текст — разные токены. Фирменный C8102E
 * на тёмном даёт 3.2:1 и для текста не годится, а как заливка с белой
 * надписью держит 5.88:1. Поэтому заливка постоянна и фирменна,
 * а текстовый акцент подстраивается под схему.
 *
 * Все пары проверены на контраст: ни одна не ниже 4.5:1 для мелкого
 * текста и 3:1 для крупного.
 */

:root {
  /* --- Тёмная схема: исходная -------------------------------------- */
  --ground: #071410;        /* 00843D, уведённый в почти-чёрный */
  --surface: #0D1E17;
  --raised: #12271E;
  --ink: #F2EFE9;
  --ink-soft: #B9C4BE;
  --dim: #8B9C93;
  --line: rgba(242, 239, 233, .14);
  --line-soft: rgba(242, 239, 233, .07);

  --accent: #C8102E;        /* заливка: фирменный красный, не меняется */
  --accent-ink: #FF4A5E;    /* текст акцентом: осветлён под тёмный фон */
  --accent-hover: #E23148;
  --on-accent: #FFFFFF;
  --ok: #2FB56A;            /* смысловой зелёный, только метки */

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -16px rgba(0, 0, 0, .7);
  color-scheme: dark;

  /* --- Типографика --------------------------------------------------- */
  --display: 'Archivo', system-ui, sans-serif;
  --text: 'Archivo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Кегли текучие: одно правило вместо значения на каждый брейкпойнт.
     Промежуточные ширины перестают быть слепой зоной. */
  --t-mono: 11px;
  --t-small: 14px;
  --t-body: clamp(0.95rem, .91rem + .18vw, 1.0625rem);
  --t-lead: clamp(1.06rem, .96rem + .44vw, 1.375rem);
  --t-h3: clamp(1.15rem, 1.06rem + .38vw, 1.5rem);
  --t-h2: clamp(1.9rem, 1.25rem + 2.8vw, 3.75rem);
  --t-h1: clamp(2.5rem, 1.4rem + 4.9vw, 6.25rem);
  --t-figure: clamp(2.2rem, 1.4rem + 3.6vw, 4.5rem);

  /* Ширина начертания Archivo: узкое для набора, широкое для витрин.
     Одна переменная — одно решение, а не подбор на каждом заголовке. */
  --wide: 112;
  --normal: 100;

  /* --- Ритм ---------------------------------------------------------- */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 72px; --s7: 112px; --s8: 160px;

  --pad: clamp(64px, 7vw, 140px);
  --gut: clamp(20px, 4vw, 56px);
  /* Высота шапки числом, а не по содержимому: её же отступ отдан
     странице, и два значения обязаны совпадать. */
  --head: 76px;
  --head-small: 58px;
  /*
   * Ширина контейнера растёт вместе с экраном, но не бесконечно.
   *
   * Жёсткие 1320 оставляли на мониторе 1920 по триста пикселей пустого
   * поля с каждой стороны — не воздух, а неиспользованное место.
   * Нижняя граница держит прежний вид на ноутбуках: до 1500 ничего
   * не меняется, 88vw там меньше 1320 и в счёт не идёт.
   *
   * Верхняя граница нужна не меньше нижней. Тянуться до края экрана
   * контейнеру нельзя: строка текста длиннее восьмидесяти знаков
   * читается хуже короткой, а на 2560 без потолка она стала бы вдвое
   * длиннее нормы. Сами текстовые блоки при этом держат собственную
   * меру в ch — контейнер шире помогает сеткам и числам, а не абзацам.
   */
  --wrap: clamp(1320px, 88vw, 1680px);

  /* Красная полоса у древка флага стала конструктивной деталью:
     тонкая вертикаль слева у ключевых разделов. */
  --band: 3px;

  --radius: 2px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- Светлая схема: только по выбору --------------------------------- */

:root[data-theme="light"] {
  --ground: #F5F2EC;        /* песочный белый: пустыня, а не офисная бумага */
  --surface: #FFFFFF;
  --raised: #EDE9E1;
  --ink: #0C2418;
  --ink-soft: #3E5348;
  --dim: #5F6E65;
  --line: rgba(12, 36, 24, .14);
  --line-soft: rgba(12, 36, 24, .07);

  --accent-ink: #C8102E;    /* на светлом фирменный красный сам держит 5.27:1 */
  --accent-hover: #A50D26;
  --ok: #06703A;

  --shadow: 0 1px 2px rgba(12, 36, 24, .06), 0 12px 32px -12px rgba(12, 36, 24, .18);
  color-scheme: light;
}