/* =====================================================================
   Датоко (Datoko) — Design Tokens (единый источник для всех web/*.html)
   =====================================================================
   Подключение: <link rel="stylesheet" href="/tokens.css">
   Правила использования: web/design-rules.md (читай ПЕРЕД правкой UI).
   Дисциплина: НЕ выдумывать новые значения на лету — только из этого
   набора. Акцент один (--primary). Отступы кратны 4 (--sp-*).
   Радиусы — только --r-sm / --r-md / --r-lg. Тени — только --shadow-*.

   Слои:
   1. Базовый (общий для всех страниц) — отступы, радиусы, тени, z-index,
      фокус, переходы, шрифт.
   2. Клиентский (form.html, лендинг, оферта, политика) — светлая/тёмная
      тема. В Mini App значения перезаписываются Telegram ThemeParams
      через inline-стили (applyTheme) — это фича, не дублировать её.
   3. Админ-контур (admin.html, body[data-palette="admin"]) — внутренний
      тёмный дашборд фаундера; собственная палитра, но те же база и сетка.
   ===================================================================== */

/* ---------- 1. Базовый слой ---------- */
:root {
  /* Отступы (сетка кратных 4) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* Радиусы: теги/бейджи — sm, инпуты/кнопки — md, карточки — lg */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;

  /* Тени (только из набора; микро-тени, без «мягкого размытия») */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, .10);

  /* Z-index шкала (запрещены 99999 и произвольные) */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 100;
  --z-menu: 900;
  --z-overlay: 1000;
  --z-modal: 1000;
  --z-toast: 2000;

  /* Фокус-обводка (a11y): никогда outline: none без замены */
  --focus-ring: 2px solid var(--primary);
  --focus-offset: 2px;

  /* Переходы */
  --tr-fast: 150ms ease;
  --tr-enter: 200ms ease;
  --tr-move: 250ms ease;

  /* Motion: stagger-задержки входа карточек (шаг 40ms, макс 4 элемента) */
  --stagger-2: 40ms;
  --stagger-3: 80ms;
  --stagger-4: 120ms;

  /* Шрифт: системный стек, без Google Fonts (CSP/РКН) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* ---------- 1b. Компонентные токены ---------- */
  /* Добавляются при создании нового UI-компонента. Даже если значение
     используется на одной странице — ОБЯЗАТЕЛЬНО в tokens.css, не в HTML.
     Правило: web/design-rules.md §Как расширять. */

  /* Prose: макс. ширина текстовых блоков (карточки FAQ, lead-тексты) */
  --max-prose: 65ch;

  /* Высота sticky-шапки (для scroll-padding при прокрутке к якорям) */
  --header-h: 4.5rem;

  /* Бейдж тарифа (plan badge: «Выбор селлеров») */
  --badge-bg: var(--primary);
  --badge-text: var(--btn-text);
  --badge-padding: var(--sp-1) var(--sp-3);

  /* Big Numbers (крупные цифры в trust/гарантия-блоках) */
  --big-num-size: clamp(2rem, 5vw, 3rem);
  --big-num-weight: 700;
  --big-num-color: var(--primary);
}

/* ---------- 2. Клиентский слой ---------- */
/* Тёмная тема — ДЕФОЛТ (бренд: нефрит #00E599 на фоне #12151C).
   form.html перезаписывает значения Telegram ThemeParams через
   inline-стили (applyTheme) — это фича, не дублировать её. */
:root,
body[data-theme="dark"] {
  --bg: #12151c;
  --card: #1c1c1e;
  --text: #f2f3f5;
  --muted: #a1a6ad;
  --primary: #00e599;
  /* Тёмный текст на нефрите: контраст ~11.4:1 (белый на #00E599 — 1.9:1, нечитаем) */
  --btn-text: #00150c;
  --border: #2c2e33;
  --error: #ef5350;
  --ok: #66bb6a;
  --link: #00e599;
  --primary-soft: rgba(0, 229, 153, .14);
  --err-soft: rgba(239, 83, 80, .12);
  --ok-soft: rgba(102, 187, 106, .14);
}

/* Светлая тема (вторичная; Telegram colorScheme=light).
   Акцент — тёмный нефрит #007a49: белый текст на нём — 5.41:1 (≥4.5:1). */
body[data-theme="light"] {
  --bg: #fafafa;
  --card: #ffffff;
  --text: #212121;
  --muted: #5b6270;
  --primary: #007a49;
  --btn-text: #ffffff;
  --border: #e4e7ec;
  --error: #d32f2f;
  --ok: #2e7d32;
  --link: #007a49;
  --primary-soft: rgba(0, 122, 73, .10);
  --err-soft: rgba(211, 47, 47, .08);
  --ok-soft: rgba(46, 125, 50, .10);
}

/* ---------- 3. Админ-контур (внутренний дашборд) ---------- */
body[data-palette="admin"] {
  --bg: #0f1419;
  --panel: #1a2129;
  --panel2: #222c36;
  --border: #2f3a45;
  --text: #d7dee6;
  --muted: #8b98a5;
  --green: #34c77b;
  --yellow: #e0b341;
  --red: #e5534b;
  --blue: #58a6ff;
  --blue-soft: rgba(88, 166, 255, .15);
  --on-blue: #0b0f14;
}