/* EZ Mini App: токены поверх темы Telegram.
   Поверхности и текст берутся из themeParams Telegram (переменные --tg-theme-*, их ставит сам Telegram и mini.js),
   акцент, стекло и шрифты остаются из набора EZ App v3, чтобы кабинет узнавался как EZ.
   Светлая и тёмная: по colorScheme Telegram (класс .tg-dark на <html> ставит mini.js), вне Telegram по системной теме.
   Без Telegram все переменные падают на токены EZ App, поэтому страница работает и в обычном браузере. */

:root {
  /* базовые EZ App (светлая) как запасные значения */
  --ez-bg: #fff5ee; --ez-bg2: #fbe8df; --ez-paper: #ffffff; --ez-ink: #2e0f24; --ez-ink2: #6a4a5d; --ez-line: #f0dad0;
  --rasp: #c8203f; --rasp-ink: #b01836; --rasp-soft: #fce0e5; --accent-fill: #c8203f; --accent-fill-2: #a9173a;
  --plum: #4a1838; --plum2: #6e2550; --peach: #ffb59a; --peach-soft: #ffe8dc;
  --ok: #1e7a4c; --ok-soft: #e1f3e8; --soon: #8a3a22; --soon-soft: #fde6d8; --bad: #b3261e; --bad-soft: #fbe3e0;
  --chart-grid: #f3d6da; --chart-2: #2c0d16; --chart-3: #e8899a; --chart-4: #8c5a66;
  --aura1: rgba(200, 32, 63, 0.16); --aura2: rgba(255, 181, 154, 0.32);
  --glass: rgba(255, 248, 244, 0.6); --glass-strong: rgba(255, 248, 244, 0.86);
  --glass-edge1: rgba(255, 255, 255, 0.95); --glass-edge2: rgba(255, 255, 255, 0.15); --glass-hi: rgba(255, 255, 255, 0.7);
  --shadow: 0 10px 30px rgba(110, 30, 60, 0.10), 0 1px 3px rgba(110, 30, 60, 0.06);
  --glass-shadow: 0 -8px 30px rgba(110, 30, 60, 0.12);

  /* поверхности и текст: Telegram первым, EZ запасным */
  --bg: var(--tg-theme-secondary-bg-color, var(--ez-bg));
  --paper: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, var(--ez-paper)));
  --ink: var(--tg-theme-text-color, var(--ez-ink));
  /* hint_color Telegram (#999) слишком бледен для текста: смешиваем с основным до 4,5:1 */
  --ink2: color-mix(in oklab, var(--tg-theme-hint-color, var(--ez-ink2)) 55%, var(--ink));
  --hint: var(--tg-theme-hint-color, var(--ez-ink2));
  --line: color-mix(in oklab, var(--tg-theme-section-separator-color, var(--tg-theme-hint-color, var(--ez-line))) 35%, var(--paper));
  --line-strong: color-mix(in oklab, var(--line) 50%, var(--ink2));
  --destructive: var(--tg-theme-destructive-text-color, var(--bad));
  --focus: var(--rasp);
  --on-accent: #ffffff;

  --font: "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-disp: Geologica, "Inter Tight", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-card: 20px; --r-field: 14px; --r-pill: 999px; --r-badge: 8px; --r-sheet: 24px;
  --tabbar-h: 60px;
  /* безопасные зоны: mini.js подставляет safeAreaInset и contentSafeAreaInset Telegram, иначе env() */
  --sa-top: env(safe-area-inset-top, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px); --sa-right: env(safe-area-inset-right, 0px);
  --content-top: 0px; /* contentSafeAreaInset.top: высота шапки Telegram в полноэкранном режиме */

  --d-micro: 120ms; --d-fast: 160ms; --d-screen: 280ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}

/* тёмная: по Telegram (класс .tg-dark) и по системе вне Telegram; явная .tg-light от Telegram перебивает системную */
@media (prefers-color-scheme: dark) {
  :root:not(.tg-light) {
    --ez-bg: #150710; --ez-bg2: #1e0c18; --ez-paper: #251220; --ez-ink: #fff0ea; --ez-ink2: #d9bdc8; --ez-line: #43223a;
    --rasp: #ff5c78; --rasp-ink: #ff7a92; --rasp-soft: #4a1628; --accent-fill: #d4274a; --accent-fill-2: #b01836; --plum: #12060e; --plum2: #3a1430; --peach-soft: #3a1f1e;
    --ok: #6bd69d; --ok-soft: #133222; --soon: #ffc3a8; --soon-soft: #40201c; --bad: #ff7a70; --bad-soft: #4a1f1c;
    --chart-grid: rgba(255, 255, 255, 0.10); --chart-2: #ffd3dc; --chart-3: #c2566d; --chart-4: #8c5a66;
    --aura1: rgba(255, 92, 120, 0.14); --aura2: rgba(255, 181, 154, 0.08);
    --glass: rgba(30, 20, 28, 0.55); --glass-strong: rgba(30, 20, 28, 0.86);
    --glass-edge1: rgba(255, 210, 220, 0.35); --glass-edge2: rgba(255, 255, 255, 0.04); --glass-hi: rgba(255, 255, 255, 0.14);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --glass-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
    --on-accent: #ffffff;
    color-scheme: dark;
  }
}
:root.tg-dark {
  --ez-bg: #150710; --ez-bg2: #1e0c18; --ez-paper: #251220; --ez-ink: #fff0ea; --ez-ink2: #d9bdc8; --ez-line: #43223a;
  --rasp: #ff5c78; --rasp-ink: #ff7a92; --rasp-soft: #4a1628; --accent-fill: #d4274a; --accent-fill-2: #b01836; --plum: #12060e; --plum2: #3a1430; --peach-soft: #3a1f1e;
  --ok: #6bd69d; --ok-soft: #133222; --soon: #ffc3a8; --soon-soft: #40201c; --bad: #ff7a70; --bad-soft: #4a1f1c;
  --chart-grid: rgba(255, 255, 255, 0.10); --chart-2: #ffd3dc; --chart-3: #c2566d; --chart-4: #8c5a66;
  --aura1: rgba(255, 92, 120, 0.14); --aura2: rgba(255, 181, 154, 0.08);
  --glass: rgba(30, 20, 28, 0.55); --glass-strong: rgba(30, 20, 28, 0.86);
  --glass-edge1: rgba(255, 210, 220, 0.35); --glass-edge2: rgba(255, 255, 255, 0.04); --glass-hi: rgba(255, 255, 255, 0.14);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --glass-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}
/* явная светлая от Telegram перебивает системную тёмную */
:root.tg-light { color-scheme: light; }