/* ==========================================================
   ДИЗАЙН-СИСТЕМА · ТОКЕНЫ - единственный источник правды.

   Система стоит на ТРЁХ базовых цветах в каждой теме:
       фон  ·  чернила  ·  акцент
   Всё остальное (поверхности, линии, приглушённый текст,
   подложка акцента) не задаётся руками, а ВЫВОДИТСЯ из этих
   трёх через color-mix. Единый стиль тогда держится сам:
   поменял базовый цвет - согласованно поехало всё, что от
   него зависит, и разойтись им негде.

   Проверено замером: Chromium и WebKit считают эти формулы
   одинаково до шестого знака.

   Тема задаётся атрибутом на любом предке (обычно на body,
   у самодостаточного файла - на html):
       data-theme = dark | light
   Без атрибута берётся тёмная.

   ВНИМАНИЕ. Шкалы радиусов, отступов и текста НЕ УТВЕРЖДЕНЫ.
   Ниже только служебный минимум под уже собранные блоки.
   Когда шкалы определим - они встанут сюда и появятся на
   витрине в разделе «Основа».
   ========================================================== */

/* Модель бокса. Без неё сетка не работает: padding раздувает
   элемент, и кадр слайда 1600 превращается в 1856. */
*, *::before, *::after { box-sizing: border-box; }


/* ---------- ТЁМНАЯ ТЕМА · три базовых цвета ---------- */
:root,
[data-theme="dark"] {
  --ds-bg: #07080f;      /* фон сцены */
  --ds-ink: #f2f4fb;     /* текст и всё, что лежит на фоне */
  --ds-accent: #4d7dff;  /* действие, акцент, выделенное */

  --ds-shadow-1: 0 2px 6px -2px rgb(0 0 0 / .55);
  --ds-shadow-2: 0 10px 26px -12px rgb(0 0 0 / .75);
}

/* ---------- СВЕТЛАЯ ТЕМА · те же три роли ---------- */
[data-theme="light"] {
  --ds-bg: #f5f6fa;
  --ds-ink: #0c1020;
  --ds-accent: #1b3bf0;  /* ОСНОВНОЙ ЦВЕТ СИСТЕМЫ: тот же, что в образце 16 */

  --ds-shadow-1: 0 2px 6px -2px rgb(12 16 32 / .12);
  --ds-shadow-2: 0 10px 26px -14px rgb(12 16 32 / .22);
}


/* ---------- ПРОИЗВОДНЫЕ · руками не задаются ----------
   Объявлены на тех же селекторах, что и базовые: значение
   переменной вычисляется там, где она объявлена, поэтому
   производные обязаны стоять рядом с базовыми - иначе в
   светлой сцене они посчитались бы от тёмных базовых. */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --ds-bg-soft:     color-mix(in srgb, var(--ds-ink)  4%, var(--ds-bg));
  --ds-surface:     color-mix(in srgb, var(--ds-ink)  6%, var(--ds-bg));
  --ds-surface-2:   color-mix(in srgb, var(--ds-ink) 11%, var(--ds-bg));

  --ds-line:        color-mix(in srgb, var(--ds-ink) 12%, transparent);
  --ds-line-soft:   color-mix(in srgb, var(--ds-ink)  7%, transparent);

  --ds-ink-dim:     color-mix(in srgb, var(--ds-ink) 66%, var(--ds-bg));
  --ds-ink-mute:    color-mix(in srgb, var(--ds-ink) 44%, var(--ds-bg));

  --ds-accent-soft: color-mix(in srgb, var(--ds-accent) 16%, transparent);
  /* текст поверх акцента: в тёмной теме тёмный, в светлой светлый -
     формула разбирается сама, потому что считает от фона */
  --ds-accent-ink:  color-mix(in srgb, var(--ds-bg) 92%, var(--ds-accent));
}


/* ---------- СЛУЖЕБНЫЙ МИНИМУМ ----------
   Не шкалы системы, а ровно то, без чего не живут уже
   собранные блоки. Настоящие шкалы появятся, когда их
   определим. */
:root {
  --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ds-weight-strong: 640;
  --ds-lh-tight: 1.12;

  --ds-r-xs: 6px;
  --ds-r-sm: 10px;
  --ds-r-lg: 22px;
  --ds-r-pill: 999px;
  --ds-space-2: 8px;

  /* сетка иконок: сейчас их нет, но на эти два числа опирается
     линтер и обопрутся первые же иконки */
  --ds-icon-size: 24px;
  --ds-stroke: 1.75;

  --ds-dur-fast: 140ms;
  --ds-ease: cubic-bezier(.22, 1, .36, 1);
}