/* =============================================================
 * theme.css — все цвета и токены портала в одном месте.
 *
 * Принцип: НИКАКИХ захардкоженных rgba/hex в pages/*.js и
 * больших стилях index.html. Любой цвет — через var(--token).
 * Если нужен новый оттенок — добавь токен сюда, не вкорми его
 * в чужой стиль.
 *
 * Тёмная тема по умолчанию (:root). Светлая — :root[data-theme="light"].
 * Переключение через document.documentElement.dataset.theme = 'light'|'dark'.
 * ============================================================= */

:root {
  /* ---- Палитра ---- */
  --bg:        #05070d;
  --panel:     #0c1322;
  --panel-2:   #111a2e;
  --line:      rgba(255,255,255,.06);
  --line-soft: rgba(255,255,255,.035);

  --text:   #e6ecf7;
  --text-2: #8a96b5;
  --text-3: #5a647e;

  --gas:      #0079c2;
  --gas-soft: #4cb7ef;
  --gas-hot:  #7fd1ff;

  --gold:      #e9c780;
  --gold-soft: #f5e0aa;

  --red:    #ff4d4f;
  --mint:   #34e5a4;
  --violet: #7d6cff;

  /* Семантические алиасы. */
  --ok:  var(--mint);
  --bad: var(--red);

  /* ---- Glass / overlay ---- */
  --topbar-bg:   rgba(5,7,13,.85);
  --topbar-line: rgba(76,183,239,.45);

  --body-glow-1: rgba(0,121,194,.18);
  --body-glow-2: rgba(125,108,255,.14);

  --nav-bg-top: rgba(7,11,20,.4);
  --nav-bg-bot: rgba(7,11,20,.95);

  /* ---- Surface (карточки KPI / панели / биржевой блок) ----
     Используется как linear-gradient(155deg, --surface-grad-from, --surface-grad-to). */
  --surface-grad-from:        rgba(20,28,48,.85);
  --surface-grad-to:          rgba(13,18,32,.7);
  --surface-grad-from-active: rgba(28,38,62,.9);
  --surface-grad-to-active:   rgba(18,24,42,.8);

  /* Map panel (слой над map-wrap) — чуть темнее карточек. */
  --map-panel-from: rgba(20,28,48,.7);
  --map-panel-to:   rgba(8,12,24,.7);

  /* Карта РФ — фон и подсветка снизу. */
  --map-bg:   #050810;
  --map-glow: rgba(0,121,194,.06);
  --map-pin-glow: rgba(127,209,255,.6);
  /* Регионы без данных (pct=null) — нейтральный fill. */
  --map-empty:  #0f1828;
  --map-stroke: rgba(255,255,255,.04);

  /* ---- Tints (заливки/обводки кнопок-чипов и пр.) ---- */
  --gas-tint-strong: rgba(76,183,239,.5);
  --gas-tint-mid:    rgba(76,183,239,.32);
  --gas-tint-soft:   rgba(76,183,239,.08);
  --gas-tint-bg:     rgba(0,121,194,.10);

  --gold-tint-strong: rgba(233,199,128,.35);
  --gold-tint-soft:   rgba(233,199,128,.10);
  --gold-tint-bg:     rgba(233,199,128,.02);
  --gold-tint-line:   rgba(233,199,128,.30);

  --red-tint-soft:   rgba(255,77,79,.3);
  --red-tint-mid:    rgba(255,77,79,.4);

  /* Плоские «филлы» для inline-инпутов / empty-state иконок и пр. */
  --fill-1: rgba(255,255,255,.04);    /* очень мягкое */
  --fill-2: rgba(255,255,255,.025);   /* hover */
  --fill-3: rgba(255,255,255,.06);    /* чуть заметнее */

  --shadow-strong: rgba(0,0,0,.3);

  /* Лоадер. */
  --loader-glow:      rgba(76,183,239,.08);
  --text-shadow-glow: rgba(76,183,239,.4);

  /* Кнопки/чипы — tonal background для active state. */
  --chip-active-bg:     var(--gas-tint-soft);
  --chip-active-border: var(--gas-tint-strong);
}

/* =============== СВЕТЛАЯ ТЕМА =============== */
:root[data-theme="light"] {
  --bg:        #f4f7fb;
  --panel:     #ffffff;
  --panel-2:   #eef2f7;
  --line:      rgba(15,30,60,.10);
  --line-soft: rgba(15,30,60,.05);

  --text:   #1a2238;
  --text-2: #475270;
  --text-3: #7a849b;

  --gas:      #005c97;
  --gas-soft: #2c95d6;
  --gas-hot:  #0e8ad4;

  --gold:      #b88a2a;
  --gold-soft: #c89b3a;

  --red:    #d23b3d;
  --mint:   #15a574;
  --violet: #5d4dd6;

  --topbar-bg:   rgba(255,255,255,.86);
  --topbar-line: rgba(14,138,212,.45);

  --body-glow-1: rgba(14,138,212,.10);
  --body-glow-2: rgba(93,77,214,.07);

  --nav-bg-top: rgba(244,247,251,.55);
  --nav-bg-bot: rgba(244,247,251,.95);

  /* Surface на светлой: чистая белая карточка с лёгким наклоном к panel-2.
     Без прозрачности — иначе фон body просвечивает «грязно». */
  --surface-grad-from:        #ffffff;
  --surface-grad-to:          #f0f4f9;
  --surface-grad-from-active: #f6f9fc;
  --surface-grad-to-active:   #e6ecf3;

  --map-panel-from: #ffffff;
  --map-panel-to:   #eaf0f7;

  /* Карта: лёгкий blue-tinted фон. Чисто-белый делает heatmap слишком жёстким. */
  --map-bg:   #e8eef6;
  --map-glow: rgba(14,138,212,.05);
  --map-pin-glow: rgba(14,138,212,.55);
  /* На светлой теме «пустой регион» — мягкий серый, не чёрный. */
  --map-empty:  #d6dde7;
  --map-stroke: rgba(15,30,60,.10);

  --gas-tint-strong: rgba(14,138,212,.55);
  --gas-tint-mid:    rgba(14,138,212,.32);
  --gas-tint-soft:   rgba(14,138,212,.08);
  --gas-tint-bg:     rgba(14,138,212,.06);

  --gold-tint-strong: rgba(184,138,42,.40);
  --gold-tint-soft:   rgba(184,138,42,.10);
  --gold-tint-bg:     rgba(184,138,42,.04);
  --gold-tint-line:   rgba(184,138,42,.35);

  --red-tint-soft: rgba(210,59,61,.30);
  --red-tint-mid:  rgba(210,59,61,.45);

  --fill-1: rgba(15,30,60,.04);
  --fill-2: rgba(15,30,60,.025);
  --fill-3: rgba(15,30,60,.06);

  --shadow-strong: rgba(15,30,60,.08);

  --loader-glow:      rgba(14,138,212,.08);
  --text-shadow-glow: rgba(14,138,212,.30);
}