/* ============================================================
   CONGIX — Переменные оформления
   Здесь можно легко изменить цвета, шрифты и размеры
   ============================================================ */

:root {
  /* ── Цвета ─────────────────────────────────────────────── */
  --color-bg:          #0D0D1E;   /* фон страницы            */
  --color-card:        #16162A;   /* карточки                */
  --color-card2:       #1E1E35;   /* вложенные карточки      */
  --color-border:      #2A2A45;   /* обводки                 */

  --color-purple:      #7B5FCC;   /* основной акцент         */
  --color-purple-soft: #7B5FCC22; /* полупрозрачный фиолет   */
  --color-purple-glow: #7B5FCC55; /* свечение кнопок         */

  --color-green:       #34C759;   /* галочки, успех          */
  --color-orange:      #FF9F0A;   /* популярный тариф        */

  --color-text:        #FFFFFF;   /* основной текст          */
  --color-mid:         #8888AA;   /* вторичный текст         */
  --color-muted:       #55556A;   /* неактивные элементы     */

  /* ── Шрифт ─────────────────────────────────────────────── */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Скругления ─────────────────────────────────────────── */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;

  /* ── Тени ──────────────────────────────────────────────── */
  --shadow-card: 0 4px 32px rgba(0,0,0,0.4);
  --shadow-btn:  0 8px 24px var(--color-purple-glow);

  /* ── Анимации ───────────────────────────────────────────── */
  --transition: 0.25s ease;

  /* ── Ширина контента ─────────────────────────────────────── */
  --max-width: 1140px;

  /* Полупрозрачный фон верхней панели (блюр) — зависит от темы */
  --topbar-bg: rgba(13, 13, 30, 0.9);
}

/* ── Светлая тема (#14): переопределяет переменные при data-theme="light" ── */
:root[data-theme="light"] {
  --color-bg:          #F4F5FB;
  --color-card:        #FFFFFF;
  --color-card2:       #EEEFF6;
  --color-border:      #DFE1EC;

  --color-purple:      #6E4FC4;
  --color-purple-soft: #6E4FC418;
  --color-purple-glow: #6E4FC433;

  --color-text:        #16162A;
  --color-mid:         #61617A;
  --color-muted:       #9A9AB2;

  --shadow-card: 0 4px 24px rgba(30, 30, 60, 0.08);
  --shadow-btn:  0 8px 24px var(--color-purple-glow);

  --topbar-bg: rgba(244, 245, 251, 0.85);
}