/* Единственное место, где живут цвета, шрифты и шкалы этого проекта.
   В разметке и в app.css только var(--...). Причина не в красоте: страница,
   объявившая свой цвет на месте использования, не поедет за темой, и это
   заметит не проверка, а человек со светлой темой на телефоне.
   Решения о ПРИМЕНЕНИИ токенов — в ../../DESIGN.md. */

@import url("../fonts.css");

:root {
  /* ——— поверхности: глубина строится светлотой, не тенями ——— */
  --bg-0: #07090d;        /* фон страницы */
  --bg-1: #0d1117;        /* карточка */
  --bg-2: #141a25;        /* выделенная область внутри карточки, наведение строки */
  --bg-3: #1b2230;        /* самая верхняя поверхность: подсказка, ящик меню */
  --line: rgba(255, 255, 255, .085);
  --line-2: rgba(255, 255, 255, .17);

  /* ——— чернила ——— */
  --ink-1: #e8ecf1;
  --ink-2: #99a4b3;
  /* #6e7988 давал 4,28 к карточке: ниже нормы 4,5. Поймано проверкой контраста,
     не глазом — на экране разница невидима, а на телефоне днём читается плохо. */
  --ink-3: #7b8696;

  /* ——— бренд: акцент интерфейса, не знак результата ——— */
  --accent: #e8a33d;
  --accent-ink: #efb257;
  --accent-tint: rgba(232, 163, 61, .13);
  --accent-line: rgba(232, 163, 61, .45);
  --on-accent: #1a1206;

  /* ——— три источника денег: порядок закреплён, не перекрашиваются ———
     Проверено validate_palette.js (скилл dataviz), тёмная тема: все пять
     проверок зелёные, различимость при дальтонизме 9,4 ΔE при пороге 8. */
  --s1: #c58506;          /* ревшара биржи */
  --s2: #04a9a9;          /* биржевой копитрейдинг */
  --s3: #9b7fe2;          /* прямые подключения по API */
  --s1-tint: rgba(197, 133, 6, .16);
  --s2-tint: rgba(4, 169, 169, .16);
  --s3-tint: rgba(155, 127, 226, .16);

  /* ——— смысл результата: только про деньги ——— */
  --pos: #34d399;         /* текстом */
  --neg: #f87171;
  --pos-mark: #44ac62;    /* заливкой: площадь кричит громче строки */
  --neg-mark: #e56660;
  --warn: #fbbf24;
  --pos-tint: rgba(52, 211, 153, .13);
  --neg-tint: rgba(248, 113, 113, .13);
  --warn-tint: rgba(251, 191, 36, .13);

  /* ——— графики ——— */
  --grid: rgba(255, 255, 255, .06);
  --axis: #7b8696;

  /* ——— шрифты ——— */
  --f-head: 'Unbounded', system-ui, sans-serif;
  --f-body: 'Onest', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ——— шкалы ——— */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-pill: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .18s;
  --z-drawer: 60;
  --z-head: 40;
  --z-tip: 90;
}

/* Светлая тема — не инверсия, а свой набор ступеней из тех же тонов.
   Проверено тем же validate_palette.js в режиме light. */
[data-theme="light"] {
  --bg-0: #f7f6f3;
  --bg-1: #ffffff;
  --bg-2: #f1efea;
  --bg-3: #ffffff;
  --line: rgba(20, 18, 12, .1);
  --line-2: rgba(20, 18, 12, .22);

  --ink-1: #16181d;
  --ink-2: #555f6d;
  /* #6d7684 на выделенной подложке давал 3,99 — та же проверка, обратная сторона */
  --ink-3: #5f6876;

  --accent: #d78c1a;
  --accent-ink: #8a5a08;
  --accent-tint: rgba(215, 140, 26, .14);
  --accent-line: rgba(138, 90, 8, .4);
  --on-accent: #1a1206;

  --s1: #9c6904;
  --s2: #0b90a2;
  --s3: #7d5cc7;
  --s1-tint: rgba(156, 105, 4, .14);
  --s2-tint: rgba(11, 144, 162, .14);
  --s3-tint: rgba(125, 92, 199, .14);

  --pos: #0b6b33;
  --neg: #a82a26;
  --pos-mark: #198b43;
  --neg-mark: #c43f3e;
  --warn: #8a5a08;
  --pos-tint: rgba(25, 139, 67, .12);
  --neg-tint: rgba(196, 63, 62, .12);
  --warn-tint: rgba(215, 140, 26, .16);

  --grid: rgba(20, 18, 12, .08);
  --axis: #5f6876;
}

/* ——— базовая рамка страницы ——— */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

::selection { background: var(--accent-tint); }

/* Числа всегда моноширинные и табличные: колонка цифр должна быть колонкой. */
.num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Витрина партнёра (24.10.2026): градиент главного числа, стекло и тени.
   Оттенки золота для градиента текста и их тёмные ступени для светлой темы. */
:root {
  --gold-hi: #ffe2a8;
  --gold-mid: #f0b55c;
  --gold-text: #ffd58a;
  --gold-deep: #7a4f0c;
  --gold-ink: #b8781a;
  --gold-dark: #8a5a10;
  --glass: rgba(255, 255, 255, .03);
  --shadow-1: rgba(0, 0, 0, .35);
  --shadow-2: rgba(0, 0, 0, .28);
  --gold-glow: rgba(232, 163, 61, .55);
  --gold-glow-soft: rgba(184, 120, 26, .35);
}