/* Единые токены дизайн-системы WebApp (единственный источник правды).
   Подключается ПЕРВЫМ на каждой странице, до экранного css.
   Тема: по умолчанию тёмная; светлая включается либо темой Telegram
   (html[data-theme="light"], выставляет theme.js), либо системной темой
   устройства вне Telegram (prefers-color-scheme, когда data-theme не задан). */

:root {
  --bg: #1c1c1e; --bg2: #2c2c2e; --bg3: #3a3a3c;
  --text: #ffffff; --muted: #8e8e93; --muted2: #636366;
  --accent: #3e7bfa; --accent-bg: rgba(62,123,250,0.15);
  --success: #32d74b; --success-bg: rgba(50,215,75,0.12);
  --warn: #ff9f0a; --warn-bg: rgba(255,159,10,0.12);
  --danger: #ff453a; --danger-bg: rgba(255,69,58,0.12);
  --purple: #af64f5; --purple-bg: rgba(175,100,245,0.13);
  --teal: #30d5c8; --teal-bg: rgba(48,213,200,0.12);
  --icon-accent: #74a7ff; --icon-accent-bg: rgba(62,123,250,0.24);
  --icon-success: #46f56f; --icon-success-bg: rgba(50,215,75,0.20);
  --icon-warn: #ffc857; --icon-warn-bg: rgba(255,159,10,0.20);
  --icon-danger: #ff7a72; --icon-danger-bg: rgba(255,69,58,0.20);
  --icon-purple: #cf8cff; --icon-purple-bg: rgba(175,100,245,0.22);
  --icon-teal: #45f4e9; --icon-teal-bg: rgba(48,213,200,0.20);
  --icon-muted: #c7c7cc; --icon-muted-bg: rgba(142,142,147,0.18);
  --icon-stars: #ffe66d; --icon-stars-bg: rgba(255,214,10,0.22);
  --icon-crypto: #62a8ff; --icon-crypto-bg: rgba(39,117,202,0.22);
  --stars: #ffd60a; --stars-bg: rgba(255,214,10,0.13); --stars-btn: #9a7d00;
  --crypto: #2775ca; --crypto-bg: rgba(39,117,202,0.13);
  --border: rgba(255,255,255,0.08);
  --btn-border: rgba(255,255,255,0.10);
  --radius: 16px; --radius-sm: 11px;

  /* типошкала (#7): значения совпадают с текущими, чтобы не плыла вёрстка */
  --fs-h1: 17px; --fs-md: 16px; --fs-body: 14px;
  --fs-sub: 13px; --fs-cap: 12px; --fs-label: 11px;
  --sp: 8px;
}

/* Светлая тема Telegram (форсится theme.js) */
:root[data-theme="light"] {
  --bg: #f2f2f7; --bg2: #ffffff; --bg3: #e5e5ea;
  --text: #000000; --muted: #6c6c70; --muted2: #aeaeb2;
  --accent: #007aff; --accent-bg: rgba(0,122,255,0.10);
  --success: #34c759; --success-bg: rgba(52,199,89,0.10);
  --warn: #ff9500; --warn-bg: rgba(255,149,0,0.10);
  --danger: #ff3b30; --danger-bg: rgba(255,59,48,0.10);
  --purple: #9b4de0; --purple-bg: rgba(155,77,224,0.12);
  --teal: #0ea5a0; --teal-bg: rgba(14,165,160,0.10);
  --icon-accent: #005fff; --icon-accent-bg: rgba(0,122,255,0.16);
  --icon-success: #20b854; --icon-success-bg: rgba(52,199,89,0.16);
  --icon-warn: #d97900; --icon-warn-bg: rgba(255,149,0,0.16);
  --icon-danger: #e13228; --icon-danger-bg: rgba(255,59,48,0.16);
  --icon-purple: #8f35d7; --icon-purple-bg: rgba(155,77,224,0.17);
  --icon-teal: #008f88; --icon-teal-bg: rgba(14,165,160,0.16);
  --icon-muted: #6c6c70; --icon-muted-bg: rgba(108,108,112,0.13);
  --icon-stars: #a97900; --icon-stars-bg: rgba(184,134,11,0.16);
  --icon-crypto: #0c63bf; --icon-crypto-bg: rgba(26,95,168,0.16);
  --stars: #b8860b; --stars-bg: rgba(184,134,11,0.10); --stars-btn: #8a6500;
  --crypto: #1a5fa8; --crypto-bg: rgba(26,95,168,0.10);
  --border: rgba(0,0,0,0.08);
  --btn-border: rgba(0,0,0,0.12);
}

/* Системная светлая тема устройства — только вне Telegram (data-theme не задан) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f2f2f7; --bg2: #ffffff; --bg3: #e5e5ea;
    --text: #000000; --muted: #6c6c70; --muted2: #aeaeb2;
    --accent: #007aff; --accent-bg: rgba(0,122,255,0.10);
    --success: #34c759; --success-bg: rgba(52,199,89,0.10);
    --warn: #ff9500; --warn-bg: rgba(255,149,0,0.10);
    --danger: #ff3b30; --danger-bg: rgba(255,59,48,0.10);
    --purple: #9b4de0; --purple-bg: rgba(155,77,224,0.12);
    --teal: #0ea5a0; --teal-bg: rgba(14,165,160,0.10);
    --icon-accent: #005fff; --icon-accent-bg: rgba(0,122,255,0.16);
    --icon-success: #20b854; --icon-success-bg: rgba(52,199,89,0.16);
    --icon-warn: #d97900; --icon-warn-bg: rgba(255,149,0,0.16);
    --icon-danger: #e13228; --icon-danger-bg: rgba(255,59,48,0.16);
    --icon-purple: #8f35d7; --icon-purple-bg: rgba(155,77,224,0.17);
    --icon-teal: #008f88; --icon-teal-bg: rgba(14,165,160,0.16);
    --icon-muted: #6c6c70; --icon-muted-bg: rgba(108,108,112,0.13);
    --icon-stars: #a97900; --icon-stars-bg: rgba(184,134,11,0.16);
    --icon-crypto: #0c63bf; --icon-crypto-bg: rgba(26,95,168,0.16);
    --stars: #b8860b; --stars-bg: rgba(184,134,11,0.10); --stars-btn: #8a6500;
    --crypto: #1a5fa8; --crypto-bg: rgba(26,95,168,0.10);
    --border: rgba(0,0,0,0.08);
    --btn-border: rgba(0,0,0,0.12);
  }
}

/* #9: мягкое появление основного контента после загрузки */
@keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } }
#view-main { animation: appFadeIn 0.22s ease both; }
@media (prefers-reduced-motion: reduce) { #view-main { animation: none; } }