/* Единая система оформления панели и стартовой страницы.

   ⚠️ ПОЧЕМУ ОТДЕЛЬНЫМ ФАЙЛОМ. До 31.08.2026 палитра жила внутри index.html, а
   стартовая страница имела свою. Итог: панель была тёмной, стартовая светлой, и
   часть плашек оказалась с захардкоженными светлыми цветами — на тёмной теме
   текст в них становился невидимым (светлый на светлом). Один источник цвета
   для обеих страниц закрывает этот класс ошибок целиком.

   ⚠️ ПРАВИЛО: в разметке НЕ писать цвет числом. Только var(--…). Если нужного
   токена нет — завести его здесь, а не «только в этом месте, быстренько».

   Три состояния темы:
     нет атрибута          — как в системе (prefers-color-scheme)
     data-theme="light"    — светлая принудительно
     data-theme="dark"     — тёмная принудительно
   Выбор человека всегда сильнее системы, поэтому [data-theme] идёт последним.
*/

/* ---------- светлая (база) ---------- */
:root{
  /* Палитра снята с smi1news.ru 31.08.2026 — панель должна выглядеть частью
     того же продукта, а не отдельной утилитой. */
  --bg:#F7F8FC;
  --bg-elev:#FFFFFF;
  --card:#FFFFFF;
  --card2:#FAFBFE;
  --raise:#EEF0FB;
  --ink:#0A0F22;
  --ink-2:#26304a;
  --soft:#5b6478;
  /* --dim держим не бледнее 4.5:1 к фону карточки: им набраны подписи плиток,
     оси графика и мелкие пояснения. Прежние #8b8fa3 (светлая) и #6B7789 (тёмная)
     давали 3.20:1 и 4.06:1 — ниже нормы WCAG AA, на мониторе с плохой калибровкой
     такие подписи просто пропадают. Проверено расчётом контраста 31.08.2026. */
  --dim:#6A6E81;
  --line:#E3E5F0;
  --line2:#D3D8EC;

  --blue:#0A35F2;
  --blue-d:#0726C2;
  --blue-soft:rgba(10,53,242,.09);
  --green:#0e9f5b;
  --amber:#b8730a;
  --red:#e5484d;
  --violet:#7A34E6;
  --cyan:#2AABEE;
  --pink:#d6409f;
  --up:#0e9f5b;
  --down:#e5484d;

  /* предупреждения и подсказки — тоже токенами, иначе они и ломаются */
  --warn-bg:#FFF7ED;
  --warn-line:#FED7AA;
  --warn-ink:#9A3412;
  --info-bg:#EEF2FF;
  --info-line:#C7D2FE;
  --info-ink:#3730A3;
  --bad-bg:#FFF1F2;
  --bad-line:#FECDD3;
  --bad-ink:#BE123C;

  /* площадки различаются градиентом: взгляд ловит цвет быстрее подписи */
  --tg1:#40BEF2; --tg2:#1E86D6;
  --mx1:#A06CFF; --mx2:#6A2ED8;

  --r:16px; --r-sm:11px; --r-lg:22px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,32,74,.06), 0 2px 8px rgba(16,32,74,.05);
  --shadow:0 2px 6px rgba(16,32,74,.06), 0 12px 32px rgba(16,32,74,.09);
  --shadow-lg:0 8px 24px rgba(16,32,74,.10), 0 28px 72px rgba(16,32,74,.14);
  --ring:0 0 0 3px rgba(10,53,242,.16);

  --ease:cubic-bezier(.22,.8,.3,1);
  --fast:.14s; --slow:.42s;
  --max:1560px;
}

/* ---------- тёмная ---------- */
/* Не «инверсия светлой»: на тёмном фоне чистый белый текст режет глаз, а
   насыщенный синий выгорает. Поэтому текст приглушён, а акцент осветлён. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#080B12;
    --bg-elev:#0F141E;
    --card:#0F141E;
    --card2:#141A26;
    --raise:#1A2231;
    --ink:#E8EDF7;
    --ink-2:#C3CCDC;
    --soft:#95A1B4;
    --dim:#76839A;
    --line:#1E2634;
    --line2:#2A3546;

    --blue:#5B86FF;
    --blue-d:#84A3FF;
    --blue-soft:rgba(91,134,255,.15);
    --green:#3ED48C;
    --amber:#F0B429;
    --red:#F4685E;
    --violet:#A78BFA;
    --cyan:#4FC3F7;
    --pink:#F472B6;
    --up:#3ED48C;
    --down:#F4685E;

    --warn-bg:rgba(240,180,41,.10);
    --warn-line:rgba(240,180,41,.30);
    --warn-ink:#F5C86B;
    --info-bg:rgba(91,134,255,.10);
    --info-line:rgba(91,134,255,.28);
    --info-ink:#A9C0FF;
    --bad-bg:rgba(244,104,94,.10);
    --bad-line:rgba(244,104,94,.30);
    --bad-ink:#FF9C95;

    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 2px 8px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.40);
    --shadow-lg:0 12px 32px rgba(0,0,0,.5), 0 36px 80px rgba(0,0,0,.5);
    --ring:0 0 0 3px rgba(91,134,255,.28);
  }
}

/* Выбор человека сильнее системного: повторяем оба набора под атрибутом,
   иначе переключатель работал бы только в одну сторону. */
:root[data-theme="dark"]{
  --bg:#080B12; --bg-elev:#0F141E; --card:#0F141E; --card2:#141A26; --raise:#1A2231;
  --ink:#E8EDF7; --ink-2:#C3CCDC; --soft:#95A1B4; --dim:#76839A;
  --line:#1E2634; --line2:#2A3546;
  --blue:#5B86FF; --blue-d:#84A3FF; --blue-soft:rgba(91,134,255,.15);
  --green:#3ED48C; --amber:#F0B429; --red:#F4685E; --violet:#A78BFA;
  --cyan:#4FC3F7; --pink:#F472B6; --up:#3ED48C; --down:#F4685E;
  --warn-bg:rgba(240,180,41,.10); --warn-line:rgba(240,180,41,.30); --warn-ink:#F5C86B;
  --info-bg:rgba(91,134,255,.10); --info-line:rgba(91,134,255,.28); --info-ink:#A9C0FF;
  --bad-bg:rgba(244,104,94,.10); --bad-line:rgba(244,104,94,.30); --bad-ink:#FF9C95;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 2px 8px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.40);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5), 0 36px 80px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(91,134,255,.28);
}
:root[data-theme="light"]{
  --bg:#F7F8FC; --bg-elev:#FFFFFF; --card:#FFFFFF; --card2:#FAFBFE; --raise:#EEF0FB;
  --ink:#0A0F22; --ink-2:#26304a; --soft:#5b6478; --dim:#6A6E81;
  --line:#E3E5F0; --line2:#D3D8EC;
  --blue:#0A35F2; --blue-d:#0726C2; --blue-soft:rgba(10,53,242,.09);
  --green:#0e9f5b; --amber:#b8730a; --red:#e5484d; --violet:#7A34E6;
  --cyan:#2AABEE; --pink:#d6409f; --up:#0e9f5b; --down:#e5484d;
  --warn-bg:#FFF7ED; --warn-line:#FED7AA; --warn-ink:#9A3412;
  --info-bg:#EEF2FF; --info-line:#C7D2FE; --info-ink:#3730A3;
  --bad-bg:#FFF1F2; --bad-line:#FECDD3; --bad-ink:#BE123C;
  --shadow-sm:0 1px 2px rgba(16,32,74,.06), 0 2px 8px rgba(16,32,74,.05);
  --shadow:0 2px 6px rgba(16,32,74,.06), 0 12px 32px rgba(16,32,74,.09);
  --shadow-lg:0 8px 24px rgba(16,32,74,.10), 0 28px 72px rgba(16,32,74,.14);
  --ring:0 0 0 3px rgba(10,53,242,.16);
}

/* ---------- база ---------- */
*{box-sizing:border-box}
html{color-scheme:light dark}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 'Onest','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;   /* числа не пляшут при обновлении */
}

/* Переход темы делаем плавным, но НЕ у всего подряд: transition:all на весь
   документ роняет производительность на таблице в несколько сотен строк. */
body,.card,.chip,nav,input,select,button,.tip{
  transition:background-color var(--fast) var(--ease),
             border-color var(--fast) var(--ease),
             color var(--fast) var(--ease);
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

/* ---------- переключатель темы ---------- */
.themesw{display:inline-flex;gap:2px;background:var(--card2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:3px}
.themesw button{
  font:inherit;font-size:12.5px;font-weight:600;line-height:1;
  padding:7px 11px;border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--dim);cursor:pointer;transition:var(--fast) var(--ease);
  display:inline-flex;align-items:center;gap:5px}
.themesw button:hover{color:var(--ink)}
.themesw button[aria-pressed="true"]{background:var(--blue);color:#fff}
.themesw svg{width:14px;height:14px;display:block}