/* ============================================================
   Дизайн-токены. Единственное место, где заданы цвета, шрифты,
   радиусы и тени. Всё остальное ссылается только на переменные.
   При переносе в Next.js этот файл уезжает в src/styles/ как есть.
   ============================================================ */

:root {
  /* --- Палитра: тёмная тема по умолчанию ---
     Не чистый чёрный и не чистый белый: пара #0a0b0e/#e9ebf0 давала
     контраст около 18:1, от которого на длинном чтении устают глаза.
     Фон приподнят до графитового, текст приглушён — итог около 13:1,
     это заметно выше требования WCAG AAA (7:1) и мягче для вечера. */
  --bg:            #101318;
  --bg-elevated:   #161a21;
  --surface:       #1a1e26;
  --surface-hover: #21262f;
  --border:        #272c36;
  --border-strong: #39404d;

  --text:          #dde1e8;
  --text-dim:      #99a1b0;
  /* Подписи и мелкие пояснения набираются 10–12px, а на таком кегле
     3.5:1 уже не читается. Подняли до ~4.6:1 — требование WCAG AA. */
  --text-faint:    #828a99;

  /* Единственные два акцента — язык самого трейдинга */
  --win:           #22c98a;
  --win-dim:       rgba(34, 201, 138, 0.12);
  --loss:          #f2564c;
  --loss-dim:      rgba(242, 86, 76, 0.12);

  /* Третий, служебный: «на проверке», предупреждения, оговорки.
     Раньше был захардкожен как #e0a13a и на светлой теме давал 2.25:1 */
  --warn:          #e0a13a;
  --warn-dim:      rgba(224, 161, 58, 0.12);

  --accent:        #dde1e8;   /* нейтральный акцент: белый на тёмном */
  --accent-contra: #101318;

  --gold:          #d8b160;   /* только для ранга #1 в лидерборде */

  /* --- Типографика --- */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* --- Геометрия --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;

  --header-h: 60px;
  --max-w: 1240px;

  /* --- Движение --- */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Тени: почти нет, тяжёлые тени старят интерфейс --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);

  --z-header: 100;
  --z-popover: 200;
  --z-modal: 300;
  --z-lightbox: 400;
}

/* --- Светлая тема как опция ---

   Прошлый белый (#fbfbfc) уходил в синеву: тот же оттенок, что у
   системных диалогов Windows, и на длинном экране он читается холодным
   и больничным. Теперь полотно тёплое (#faf9f7) — бумага, а не экран.

   Карточки при этом остаются чисто белыми: разница между тёплым фоном и
   белой карточкой сама рисует границу, и сетка держится даже там, где
   рамку не видно. Чисто белый фон не берём по той же причине, что и
   раньше — карточки сливаются с полотном.

   Текст и рамки уведены в ту же тёплую сторону. Тёплый фон с холодным
   серым текстом даёт грязный зеленоватый оттенок на стыке — глаз ловит
   его даже не понимая, что именно не так.

   Контраст проверен: мелкая подпись 5.3:1, основной текст 15:1 —
   с запасом к требованию WCAG AA в 4.5:1 (гоняется browser-check.js). */
:root[data-theme="light"] {
  --bg:            #faf9f7;
  --bg-elevated:   #ffffff;
  --surface:       #ffffff;
  --surface-hover: #f3f1ed;
  --border:        #e8e5df;
  --border-strong: #cec9c0;

  --text:          #1c1a17;
  --text-dim:      #5d5852;
  --text-faint:    #6d675f;

  /* Зелёный на светлой теме затемнён: прежний #0e9c62 давал на белой
     карточке 3.5:1, а им набраны все подтверждённые суммы — главная
     цифра площадки. Требование WCAG AA для текста — 4.5:1. В тёмной теме
     цвет другой и там всё в порядке, поэтому правка только здесь. */
  --win:           #0a7a4c;
  --win-dim:       rgba(10, 122, 76, 0.10);
  --loss:          #c8352b;
  --loss-dim:      rgba(200, 53, 43, 0.10);

  --warn:          #8a5a12;
  --warn-dim:      rgba(138, 90, 18, 0.12);

  --accent:        #23201c;
  --accent-contra: #ffffff;

  --gold:          #a9832f;

  /* Тень тоже тёплая: холодная синеватая тень на тёплой бумаге
     выглядит как чужой слой, наложенный поверх */
  --shadow-sm: 0 1px 2px rgba(40, 34, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(40, 34, 26, 0.10);
  --shadow-lg: 0 24px 64px rgba(40, 34, 26, 0.16);
}