/* Копия deadmoney/packages/ui/src/styles/tokens.css — не править здесь, обновлять из кита. */
/*
 * Токены DeadMoney UI. Три слоя:
 *  1. шкалы — шрифты, радиусы, отступы, движение; от темы не зависят;
 *  2. палитра экосистемы (DeadBoost / DeadSkins / DeadMoney) — сырые цвета, в компонентах напрямую не используются;
 *  3. семантика темы — [data-theme="dark"] и [data-theme="light"]; компоненты берут только её.
 *
 * Тёмная тема — ровно палитра DeadSkins («воздушный» бенто-дашборд): поверхности различаются оттенком,
 * а не рамками; выбранное — инверсия в кремовый; оранжевый — главное действие; янтарный — деньги.
 * Светлая — та же логика: холодный светло-серый фон (не бежевый), белые карточки, выбранное — инверсия
 * в чёрный. Контраст проверен (см. «Основы → Цвета»): текст ≥ 4.5:1, кроме --ink-faint (плейсхолдеры).
 *
 * Тема задаётся атрибутом data-theme на <html> (скрипт в <head> ставит её до отрисовки, см. lib/theme.ts)
 * или на любом контейнере — тогда тема действует только внутри него (превью обеих тем рядом).
 */

:root {
  /* шрифты: в Next.js — переменные next/font (--font-jost, --font-unbounded), в Storybook — Google Fonts */
  --font-body: var(--font-jost, "Jost"), "Segoe UI", system-ui, sans-serif;
  --font-logo: var(--font-unbounded, "Unbounded"), var(--font-jost, "Jost"), "Arial Black", sans-serif;

  /* шкала шрифтов 12 / 14 / 16 / 20 / 28 / 40 / 60 — как у DeadSkins */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-28: clamp(22px, 2vw, 28px);
  --fs-40: clamp(28px, 3vw, 40px);
  --fs-60: clamp(38px, 4.4vw, 60px);
  /* исключение из шкалы (владелец 28.09.2026) — только крупные цифры 3D-сцены главной: сумма и номер главы */
  --fs-92: clamp(60px, 6.4vw, 92px);
  --fs-112: clamp(60px, 7.8vw, 112px);

  /* радиусы: крупная карточка → карточка → плитка → кнопка/поле */
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-xs: 8px;
  --r-pill: 999px;

  --tap: 44px;
  --gap: clamp(8px, 0.9vw, 12px);
  --pad-card: clamp(14px, 1.3vw, 20px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.37, 0, 0.63, 1);
  --dur-fast: 0.15s;
  --dur: 0.2s;
  --dur-slow: 0.35s;

  --container: 1480px;
  --gutter: clamp(16px, 2.2vw, 32px);
  --header-h: 64px;
  --rail-w: 224px;

  /* палитра экосистемы */
  --eco-orange: #da5a29;
  --eco-orange-hi: #e8703f;
  --eco-amber: #ffac11;
  --eco-sapphire: #3874ae;
  --eco-critical: #e8321e;
  --eco-streak: #3cf0a0;
  --eco-mint: #d0fec5;
  --eco-magenta: #ee51ff;
  --eco-cyan: #3fdcff;
  --eco-gold: #ffb649;
  --eco-cream: #fff1dc;

  /* площадки стримов — только для их знаков */
  --platform-twitch: #9146ff;
  --platform-youtube: #ff0033;
  --platform-vk: #0077ff;
  --platform-kick: #2dbe3a;
  --platform-telegram: #2aabee;
  --platform-steam: #1b2838;
}

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* поверхности: страница → карточка → плитка внутри карточки → элемент управления */
  --page: #09090b;
  --surface-1: #111316;
  --surface-2: #171a1e;
  --surface-3: #1f2328;
  --surface-4: #272c32;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.12);
  /* лёгкая тень карточки: в тёмной теме не нужна — хватает оттенка и волосяной линии */
  --elev-card: 0 0 #0000;

  --ink: #fff1dc;
  --ink-2: #d6d1c8;
  --ink-muted: #8d9199;
  --ink-faint: #5d6169;

  /* выбранное (чип, вкладка, раздел) — инверсия в кремовый */
  --selected-bg: #fff1dc;
  --selected-ink: #0b0b0c;

  /* главное действие: оранжевый DeadBoost, текст на нём белый (решение владельца) */
  --accent: #da5a29;
  --accent-hover: #e8703f;
  --on-accent: #ffffff;
  --accent-text: #f07a4a;
  --accent-soft: rgba(218, 90, 41, 0.14);

  /* деньги и суммы — янтарный; знак DeadMoney — тоже янтарный */
  --money: #ffac11;
  --money-soft: rgba(255, 172, 17, 0.14);
  --brand: #ffac11;

  --success: #3cf0a0;
  --success-soft: rgba(60, 240, 160, 0.14);
  --danger: #ff6a57;
  --danger-fill: #e8321e;
  --danger-soft: rgba(255, 106, 87, 0.14);
  --info: #6aa4e0;
  --info-soft: rgba(106, 164, 224, 0.16);
  --magenta: #ee51ff;
  --cyan: #3fdcff;

  --focus: #fff1dc;
  --scrim: rgba(0, 0, 0, 0.72);
  --glass: rgba(17, 19, 22, 0.86);
  --hatch: rgba(255, 241, 220, 0.025);
  --shadow-card: 0 24px 48px -28px rgba(0, 0, 0, 0.9);
  --shadow-float: 0 18px 50px -12px rgba(0, 0, 0, 0.85);
  --scrollbar: #272c32;
  --scrollbar-hover: #454c55;
}

[data-theme="light"] {
  color-scheme: light;

  --page: #eff1f4;
  --surface-1: #ffffff;
  --surface-2: #f5f6f8;
  /* элементы управления заметно темнее фона страницы — иначе вторичная кнопка на странице пропадает */
  --surface-3: #e5e8ec;
  --surface-4: #d9dde3;
  --line: rgba(18, 20, 24, 0.07);
  --line-strong: rgba(18, 20, 24, 0.13);
  --elev-card: 0 1px 2px rgba(18, 20, 24, 0.04), 0 12px 32px -22px rgba(18, 20, 24, 0.22);

  --ink: #121418;
  --ink-2: #3c414a;
  --ink-muted: #636973;
  --ink-faint: #9ba1ab;

  --selected-bg: #121418;
  --selected-ink: #ffffff;

  /* на светлом фоне оранжевый на шаг глубже — белый текст на нём 4.55:1 (AA) */
  --accent: #c94f1c;
  --accent-hover: #b4461b;
  --on-accent: #ffffff;
  --accent-text: #b4461b;
  --accent-soft: rgba(201, 79, 28, 0.1);

  /* янтарь на белом не читается (1.9:1) — суммы глубоким янтарём, 5.3:1 */
  --money: #9e5c00;
  --money-soft: rgba(224, 146, 0, 0.14);
  --brand: #e39400;

  --success: #0b7f52;
  --success-soft: rgba(11, 127, 82, 0.1);
  --danger: #c2301c;
  --danger-fill: #c2301c;
  --danger-soft: rgba(194, 48, 28, 0.09);
  --info: #2d68a2;
  --info-soft: rgba(45, 104, 162, 0.1);
  --magenta: #a8269f;
  --cyan: #08809e;

  --focus: #121418;
  --scrim: rgba(18, 20, 24, 0.42);
  --glass: rgba(255, 255, 255, 0.86);
  --hatch: rgba(18, 20, 24, 0.035);
  --shadow-card: 0 1px 2px rgba(18, 20, 24, 0.05), 0 18px 40px -24px rgba(18, 20, 24, 0.3);
  --shadow-float: 0 22px 50px -18px rgba(18, 20, 24, 0.32), 0 2px 8px rgba(18, 20, 24, 0.06);
  --scrollbar: #cfd3d9;
  --scrollbar-hover: #aeb3bb;
}