/* ══════════════════════════════════════════════════
   Точка Отсчёта — Дизайн-токены и цветовая палитра
   ══════════════════════════════════════════════════ */

:root {
  /* Основные цвета */
  --color-primary: #87CEEB;
  --color-primary-dark: #1A2B48;
  --color-primary-deep: #4A9FD4;
  --color-success: #6BCB77;
  --color-success-dark: #4CAF59;
  --color-accent: #F4C542;
  --color-danger: #FF6B6B;
  --color-danger-dark: #E05555;

  /* Фоны (светлая тема по умолчанию) */
  --color-bg: #F0F7FF;
  --color-bg-card: rgba(255, 255, 255, 0.75);
  --color-bg-card-solid: #FFFFFF;
  --color-bg-header: linear-gradient(160deg, #87CEEB 0%, #4A9FD4 100%);

  /* Текст */
  --color-text: #1A2B48;
  --color-text-secondary: #5A7A9A;
  --color-text-on-primary: #FFFFFF;
  --color-text-muted: #8AA5C0;

  /* Навигация */
  --color-nav-bg: rgba(255, 255, 255, 0.95);
  --color-nav-border: rgba(135, 206, 235, 0.3);
  --color-nav-active: #1A2B48;
  --color-nav-inactive: #8AA5C0;

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 8px 32px rgba(26, 43, 72, 0.08);

  /* Размеры */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Отступы */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Шрифты */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-xs: 11px;
  --font-sm: 13px;
  --font-md: 15px;
  --font-lg: 17px;
  --font-xl: 22px;
  --font-2xl: 28px;
  --font-3xl: 40px;
  --font-4xl: 56px;

  /* Анимации */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Нижняя навигация */
  --nav-height: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Тёмная тема (авто по Telegram) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0F172A;
    --color-bg-card: rgba(30, 45, 72, 0.75);
    --color-bg-card-solid: #1E2D48;
    --color-bg-header: linear-gradient(160deg, #1A3A5C 0%, #0F2340 100%);

    --color-text: #E8F4FD;
    --color-text-secondary: #7BA8CC;
    --color-text-muted: #4A7A9B;

    --color-nav-bg: rgba(15, 23, 42, 0.97);
    --color-nav-border: rgba(74, 159, 212, 0.2);
    --color-nav-active: #87CEEB;
    --color-nav-inactive: #4A7A9B;

    --glass-bg: rgba(26, 45, 80, 0.6);
    --glass-border: rgba(135, 206, 235, 0.15);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
}

/* ── Переопределение по теме Telegram ── */
.tg-dark {
  --color-bg: #0F172A;
  --color-bg-card: rgba(30, 45, 72, 0.75);
  --color-bg-card-solid: #1E2D48;
  --color-bg-header: linear-gradient(160deg, #1A3A5C 0%, #0F2340 100%);
  --color-text: #E8F4FD;
  --color-text-secondary: #7BA8CC;
  --color-text-muted: #4A7A9B;
  --color-nav-bg: rgba(15, 23, 42, 0.97);
  --color-nav-border: rgba(74, 159, 212, 0.2);
  --color-nav-active: #87CEEB;
  --color-nav-inactive: #4A7A9B;
  --glass-bg: rgba(26, 45, 80, 0.6);
  --glass-border: rgba(135, 206, 235, 0.15);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}