/* ============================================================
   brand/tokens.css — единый источник бренд-системы
   crypto-sandbox · zero-build · plain CSS custom properties
   ------------------------------------------------------------
   ГРАНИЦА (CLAUDE.md / спека §1.1):
   - Надмножество текущей палитры L1/лендинга. Значения сырых
     токенов — 1:1 как в prototype/landing/ и prototype/l1/.
   - Легаси-имена (--bg --card … --ok) сохранены как АЛИАСЫ на
     семантику → подключение файла НЕ даёт визуального сдвига.
   - prototype/wallet/ и emulator/* НЕ трогаем: их инлайн-:root
     остаётся, переезд на токены — позже отдельной фазой (M).
   - Тема пока ТОЛЬКО тёмная. Светлая — якорь ниже, без реализации.
   ============================================================ */

:root{
  /* ========== RAW PALETTE (цвет, сырые) ========== */
  --c-bg:#0e1116;            /* фон страницы */
  --c-surface:#171b22;       /* карточка (=legacy --card) */
  --c-surface-2:#1d2530;     /* вложенная поверхность (=legacy --card2) */
  --c-line:#2a303a;          /* границы/разделители */

  --c-fg:#e6e9ef;            /* основной текст */
  --c-muted:#9aa4b2;         /* вторичный текст — AA ok: ~7.4:1 на --c-bg */
  --c-muted-strong:#aab4c2;  /* запас для очень мелкого текста (12px) */

  /* Brand */
  --c-accent:#4f8cff;        /* основной акцент / CTA */
  --c-accent-2:#6ee7b7;      /* мятный акцент / ссылки / ok */
  --c-brand-grad-end:#7c5cff;/* конец градиента лого (accent → этот) */
  /* Redesign A — бренд-градиент + фоновые глоу + danger-плашка (новые токены) */
  --grad-brand:linear-gradient(135deg,var(--c-accent),var(--c-brand-grad-end));
  --glow-1:radial-gradient(circle,rgba(124,92,255,.40),rgba(79,140,255,.14) 50%,transparent 72%);
  --glow-2:radial-gradient(circle,rgba(79,140,255,.26),transparent 70%);
  --c-danger-bg:rgba(255,107,107,.12);
  --c-danger-line:rgba(255,107,107,.5);
  --c-line-strong:#38425a;                          /* граница при hover (ярче --c-line) */
  --grad-ic:linear-gradient(135deg,rgba(79,140,255,.18),rgba(124,92,255,.18)); /* бейдж иконки */
  --grad-border:linear-gradient(135deg,rgba(79,140,255,.5),rgba(124,92,255,.2),transparent); /* акцентная рамка */
  --grad-panel:linear-gradient(135deg,#141a24,var(--c-surface)); /* фон панели «партнёры» (тема-зависимый) */

  /* States */
  --c-ok:#6ee7b7;
  --c-warn:#f5a623;
  --c-danger:#ff6b6b;        /* L2-ловушки — красный акцент */

  /* Служебные */
  --c-chip-bg:#222835;       /* фон чипов/лэнг-переключателя */
  --c-note-bg:#10233b;       /* плашка-note (инфо) фон */
  --c-note-line:#1f3a5f;     /* плашка-note граница */
  --c-overlay:rgba(0,0,0,.5);
  --c-focus:#4f8cff;         /* кольцо фокуса (производный от accent) */

  /* ========== ТИПОГРАФИКА ========== */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* type-scale (~1.2 modular, округлённо px) */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:16px;
  --fs-md:17px;
  --fs-lg:18px;
  --fs-xl:21px;
  --fs-2xl:24px;
  --fs-3xl:34px;             /* H1 (на мобайле через clamp() в landing.css) */
  --fs-cta:19px;             /* primary CTA: >=18.66px bold = WCAG «large text»
                                → белый на --c-accent (3.21:1) легитимно проходит AA (порог 3:1) */

  --fw-reg:400;
  --fw-bold:700;

  --lh-tight:1.2;            /* заголовки */
  --lh-base:1.6;             /* текст */
  --ls-tight:-.4px;          /* letter-spacing заголовков */

  /* ========== ОТСТУПЫ (база 4px) ========== */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;             /* секционный вертикальный ритм */
  --sp-11:44px;

  /* ========== РАДИУСЫ ========== */
  --r-sm:7px;
  --r-md:11px;
  --r-lg:14px;
  --r-xl:16px;
  --r-pill:20px;

  /* ========== ТЕНИ ========== */
  /* --sh-card заведён на будущее, НЕ применяем сейчас (плоско, минимализм). */
  --sh-card:0 1px 2px rgba(0,0,0,.25);
  --sh-focus:0 0 0 3px rgba(79,140,255,.45);  /* кольцо :focus-visible */
  /* Redesign A — глубина/свечение (фундамент, не хардкод в вёрстке) */
  --sh-cta:0 10px 30px -6px rgba(79,140,255,.5);   /* glow-тень primary CTA */
  --sh-float:0 34px 70px -14px rgba(0,0,0,.55);     /* парящая карточка-мок */

  /* ========== КОНТЕЙНЕР / ЛЭЙАУТ ========== */
  --container:980px;
  --gutter:clamp(18px, 4.5vw, 32px); /* адаптивный боковой отступ: ~18px мобайл → 32px десктоп (воздух у краёв) */

  /* ========== БРЕЙКПОИНТЫ (константы-документация) ==========
     CSS не допускает переменные в @media, поэтому значения
     фиксируем здесь как единый источник ПРАВДЫ для всех страниц.
     Правите медиазапросы — сверяйтесь с этими числами:
       --bp-md: 820px   (двухколоночное → стопка)
       --bp-sm: 620px   (компактный мобайл, кнопки full-width)   */

  /* ========== АНИМАЦИИ ========== */
  --dur-fast:120ms;
  --ease:ease;

  /* ============================================================
     ЛЕГАСИ-АЛИАСЫ — 1:1 с текущим landing/ и l1/.
     НЕ удалять: на них опирается существующая вёрстка лендинга.
     Значения проброшены через семантику выше → один источник.
     ============================================================ */
  --bg:var(--c-bg);
  --card:var(--c-surface);
  --card2:var(--c-surface-2);
  --line:var(--c-line);
  --fg:var(--c-fg);
  --muted:var(--c-muted);
  --accent:var(--c-accent);
  --accent2:var(--c-accent-2);
  --warn:var(--c-warn);
  --danger:var(--c-danger);
  --ok:var(--c-ok);
}

/* ============================================================
   СВЕТЛАЯ ТЕМА (L3). Переопределяем семантические --c-* — легаси-алиасы
   (--bg/--card/--fg/--muted/…) подтягиваются сами. Два пути:
   1) АВТО по ОС (работает БЕЗ JS): prefers-color-scheme:light, если
      пользователь не форсировал тёмную через тоггл;
   2) ЯВНЫЙ выбор тоггла: :root[data-theme="light"] (theme.js + localStorage).
   Значения светлых токенов идентичны в обоих блоках — держать в синхроне.
   Контраст AA проверен: --c-muted #586473 ~5.3:1 на --c-bg; ссылки/ok #0a7f57
   ~4.6:1; CTA (белый на --c-accent) = large-text (--fs-cta) → AA ≥3:1.
   ============================================================ */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --c-bg:#f6f8fb; --c-surface:#ffffff; --c-surface-2:#eef1f6;
    --c-line:#dde3ec; --c-line-strong:#c3ccd9;
    --c-fg:#121820; --c-muted:#586473; --c-muted-strong:#434e5d;
    --c-accent-2:#0a7f57; --c-ok:#0a7f57; --c-danger:#dc2626;
    --c-chip-bg:#eef1f6; --c-note-bg:#e8f0fe; --c-note-line:#c4daf9; --c-overlay:rgba(0,0,0,.4);
    --c-danger-bg:rgba(220,38,38,.08); --c-danger-line:rgba(220,38,38,.42);
    --glow-1:radial-gradient(circle,rgba(124,92,255,.16),rgba(79,140,255,.08) 50%,transparent 72%);
    --glow-2:radial-gradient(circle,rgba(79,140,255,.12),transparent 70%);
    --sh-float:0 24px 60px -18px rgba(23,43,77,.22); --sh-cta:0 10px 30px -6px rgba(79,140,255,.35);
    --grad-panel:linear-gradient(135deg,#eef2f8,#ffffff);
  }
}
:root[data-theme="light"]{
  --c-bg:#f6f8fb; --c-surface:#ffffff; --c-surface-2:#eef1f6;
  --c-line:#dde3ec; --c-line-strong:#c3ccd9;
  --c-fg:#121820; --c-muted:#586473; --c-muted-strong:#434e5d;
  --c-accent-2:#0a7f57; --c-ok:#0a7f57; --c-danger:#dc2626;
  --c-chip-bg:#eef1f6; --c-note-bg:#e8f0fe; --c-note-line:#c4daf9; --c-overlay:rgba(0,0,0,.4);
  --c-danger-bg:rgba(220,38,38,.08); --c-danger-line:rgba(220,38,38,.42);
  --glow-1:radial-gradient(circle,rgba(124,92,255,.16),rgba(79,140,255,.08) 50%,transparent 72%);
  --glow-2:radial-gradient(circle,rgba(79,140,255,.12),transparent 70%);
  --sh-float:0 24px 60px -18px rgba(23,43,77,.22); --sh-cta:0 10px 30px -6px rgba(79,140,255,.35);
  --grad-panel:linear-gradient(135deg,#eef2f8,#ffffff);
}

/* Уважение к prefers-reduced-motion — глобальный хук для страниц,
   подключающих токены (сами переходы объявляются в landing.css). */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; }
}