/* Дизайн-токены PokerLab. Единственное место, где объявляются цвета.

   Визуальный язык: строгий рабочий инструмент. Нейтральный графит без синего
   подтона, один холодный акцент, тонкие линии вместо теней, плотная шкала
   размеров. Зелёный и красный зарезервированы за результатом раздачи
   (выигрыш/проигрыш), поэтому акцент намеренно взят из индиго: он не спорит
   с семантикой фишек. */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Единая шкала скруглений: чем меньше элемент, тем меньше радиус. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --line-base: 1.5;
  --line-tight: 1.2;
  /* Geist на крупных кеглях выглядит разреженным, поэтому заголовки поджимаем. */
  --tracking-tight: -0.012em;

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 260ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  --z-content: 0;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  --rail-width: 240px;
  --rail-width-compact: 72px;
  --topbar-height: 56px;
  --tabbar-height: 60px;
  --content-max: 1680px;
}

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

  --color-bg: #0b0b0d;
  --color-surface: #121215;
  --color-surface-raised: #191a1e;
  --color-surface-sunken: #08080a;
  --color-border: #23242a;
  --color-border-strong: #35363e;
  --color-text: #ededf0;
  --color-text-muted: #9a9aa5;
  --color-text-faint: #6b6b76;

  /* Акцент разведён на два токена: заливка кнопок и текст ссылок не могут быть
     одним цветом, иначе один из них проваливает контраст на тёмном фоне. */
  --color-accent: #5964d6;
  --color-accent-hover: #4a54c9;
  --color-accent-text: #8b93ff;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: rgba(89, 100, 214, 0.18);

  --color-success: #35c07a;
  --color-success-soft: rgba(53, 192, 122, 0.16);
  --color-warning: #d99a2b;
  --color-warning-soft: rgba(217, 154, 43, 0.16);
  --color-danger: #f2555a;
  --color-danger-soft: rgba(242, 85, 90, 0.16);
  /* Верх шкалы тепловых карт: на нём должен читаться текст, поэтому он темнее
     сигнального --color-danger и одинаков в обеих темах. */
  --color-danger-strong: #b3262c;
  --heat-max: 100%;

  --color-overlay: rgba(6, 6, 8, 0.7);
  --shadow-popover: 0 16px 40px rgba(0, 0, 0, 0.55);
}

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

  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #f2f2f4;
  --color-border: #e3e3e7;
  --color-border-strong: #c8c8cf;
  --color-text: #17171a;
  --color-text-muted: #6b6b76;
  --color-text-faint: #8d8d97;

  --color-accent: #4a54c9;
  --color-accent-hover: #3b44ad;
  --color-accent-text: #4a54c9;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: rgba(74, 84, 201, 0.12);

  --color-success: #157f4b;
  --color-success-soft: rgba(21, 127, 75, 0.12);
  --color-warning: #8a6100;
  --color-warning-soft: rgba(138, 97, 0, 0.12);
  --color-danger: #c62d38;
  --color-danger-soft: rgba(198, 45, 56, 0.12);
  --color-danger-strong: #b3262c;
  /* На светлом фоне шкала останавливается раньше: дальше тёмный текст в
     ячейке перестаёт читаться. */
  --heat-max: 55%;

  --color-overlay: rgba(20, 20, 24, 0.42);
  --shadow-popover: 0 12px 32px rgba(20, 20, 24, 0.14);
}

/* Совместимость: переменные унаследованного просмотрщика указывают на токены,
   поэтому перенесённый интерфейс подхватывает обе темы без правок его CSS. */
:root {
  --bg: var(--color-bg);
  --panel: var(--color-surface);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent-text);
  --hero: var(--color-success);
  --danger: var(--color-danger);
  --border: var(--color-border);
  --text: var(--color-text);
}