/* ==========================================================================
   ДИЗАЙН-ТОКЕНЫ
   Взято с макета (тёмная iOS/Telegram тема). Если Telegram передаст свою
   тему (themeParams) — js/telegram.js переопределит часть переменных ниже
   прямо на :root, поэтому весь UI использует только эти переменные.
   ========================================================================== */
:root{
  color-scheme: dark;

  /* Фон */
  --bg:               #000000;
  --bg-elevated:      #1c1c1e;   /* карточки/строки списков */
  --bg-elevated-2:    #232326;   /* hover/pressed для строк */
  --bg-hero-top:      #4f7cf6;   /* градиент шапки на главной */
  --bg-hero-bottom:   #0a0a0c;

  /* Текст */
  --text-primary:     #ffffff;
  --text-secondary:   #8e8e93;
  --text-tertiary:    #636366;

  /* Акценты / статусы */
  --accent-blue:      #4f7cf6;
  --accent-purple:    #8b7bf7;
  --divider:          rgba(255,255,255,0.08);
  --chevron:          #48484a;

  /* Иконки-«бейджи» (цвета квадратов иконок из макета) */
  --icon-blue:    #3d8bfd;
  --icon-green:   #34c759;
  --icon-orange:  #ff9f0a;
  --icon-purple:  #8b7bf7;
  --icon-pink:    #ff5fa2;
  --icon-red:     #ff453a;
  --icon-teal:    #30c9c9;

  /* Форма/радиусы — как в iOS 17 group lists */
  --radius-card:   20px;
  --radius-row:    14px;
  --radius-pill:   20px;
  --radius-icon:   9px;

  /* Отступы */
  --gap-page:      16px;
  --gap-block:     28px;
  --gap-row:       0px;

  /* Таббар */
  --tabbar-h:            52px;
  --tabbar-bg:           rgba(28,28,30,0.86);
  --tabbar-border:       rgba(255,255,255,0.08);
  --tabbar-active-bg:    #ffffff;
  --tabbar-active-fg:    #000000;
  --tabbar-inactive-fg:  #9a9aa0;

  /* Safe area (iOS notch / Telegram верхняя панель) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Telegram Mini App может прислать светлую тему — на светлом фоне
   держим ту же геометрию, но с более традиционными iOS-светлыми тонами. */
:root[data-tg-theme="light"]{
  color-scheme: light;
  --bg:             #f2f2f7;
  --bg-elevated:    #ffffff;
  --bg-elevated-2:  #ececee;
  --bg-hero-bottom: #f2f2f7;
  --text-primary:   #000000;
  --text-secondary: #6d6d72;
  --text-tertiary:  #a0a0a5;
  --divider:        rgba(60,60,67,0.16);
  --chevron:        #c7c7cc;
  --tabbar-bg:            rgba(255,255,255,0.86);
  --tabbar-border:        rgba(60,60,67,0.16);
  --tabbar-active-bg:     #000000;
  --tabbar-active-fg:     #ffffff;
  --tabbar-inactive-fg:   #8e8e93;
}