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

   Палитра Shades of Blue. Из справочника на 12 оттенков в дело взяты три,
   остальные оставлены на будущее:
     Sapphire  #0F52BA — акцент-заливка (истина, надёжность, статус)
     Azure     #007FFF — акцент-текст на тёмной теме (ясность, свобода)
     Navy      #000871 — подтон тёмных поверхностей
   Не взяты Aqua/Electric/Celeste: неон в интерфейсе учебного сервиса
   быстро утомляет глаза, ему место разве что в подсветке.

   Как палитра разложена по темам. Поверхности НЕЙТРАЛЬНЫЕ, с холодным
   подтоном в сторону Navy: заливать фоны и карточки синим нельзя, иначе
   «везде синё» и интерфейс дешевит. Цвет живёт только в акцентах: кнопки,
   ссылки, обводки активных элементов, подложки-подсветки.

   Главное правило: Sapphire — это ЗАЛИВКА, текст на ней всегда белый
   (--color-on-accent), контраст 7.1:1. Текстом Sapphire работает на светлой
   теме (5.9:1), а на тёмной уступает место Azure: #0F52BA на почти чёрном
   фоне даёт 2.3:1 и не читается, #007FFF — 4.9:1.
   ============================================================ */

:root {
  /* ── Цвета: тёмная тема (по умолчанию) ─────────────────── */
  /* Палитра переведена на фиолет по образцу-шаблону (стиль «умный ИИ-продукт»).
     Фон — почти чёрный с фиолетовым подтоном, чтобы аврора-свечение читалось. */
  --color-bg:          #0A0912;   /* фон страницы            */
  --color-bg-rgb:      10, 9, 18;
  --color-card:        #14121E;   /* карточки (непрозрачные)  */
  --color-card2:       #1D1A2B;   /* вложенные карточки      */
  --color-border:      #2C2740;   /* обводки                 */

  --color-accent:      #7C5CFF;   /* акцент — фиолет, заливка */
  --color-on-accent:   #FFFFFF;   /* текст поверх акцента    */
  --color-accent-text: #A78BFA;   /* акцент как цвет текста (читаем на тёмном) */
  --color-accent-soft: rgba(124, 92, 255, 0.14);  /* подложки */
  --color-accent-glow: rgba(124, 92, 255, 0.38);  /* свечение */
  /* Градиент акцентной карточки — как яркая фиолетовая плитка в шаблоне. */
  --gradient-accent:   linear-gradient(140deg, #6D4AFF 0%, #A084FF 100%);

  /* ── Стекло (glassmorphism): полупрозрачные матовые карточки ── */
  --glass-bg:     rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-blur:   14px;
  /* Стекло всех блоков и кнопок — как у карточек-папок на дашборде.
     Без размытия фона: точки сетки и свечение видны сквозь блок. */
  --glass-folder: linear-gradient(150deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.06) 100%);

  --color-red:         #FF6B6B;   /* ошибки                  */
  --color-green:       #3DBE7A;   /* галочки, успех          */
  /* Текст поверх зелёной заливки. Белым по светло-зелёному всего 2.4:1,
     поэтому на тёмной теме подпись тёмная; на светлой заливка темнеет
     до #1E8A4E, и там читается уже белый. */
  --color-on-green:    #0B1220;   /* текст поверх зелёного   */
  /* Янтарь — служебное «внимание/вторая команда/просрочено». К синему он
     идёт дополнительным цветом, спутать их невозможно. Три переменные,
     потому что у цвета две роли: --color-orange идёт ТЕКСТОМ и обводкой
     (на светлой теме темнеет), --color-orange-fill — ЗАЛИВКА плашек,
     светлая в обеих темах, текст на ней — --color-on-orange. */
  --color-orange:      #FFB020;   /* популярный тариф        */
  --color-orange-fill: #FFB020;   /* заливка янтарных плашек */
  --color-on-orange:   #171310;   /* текст поверх заливки    */

  --color-text:        #E4EBF5;   /* основной текст          */
  --color-mid:         #98A5B8;   /* вторичный текст         */
  --color-muted:       #6E7C90;   /* неактивные элементы     */

  /* ── Шрифт ─────────────────────────────────────────────── */
  --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 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-btn:  0 8px 24px var(--color-accent-glow);

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

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

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

  /* Стекло и лёгкие подложки. Держим отдельными переменными: жёсткие
     rgba(255,255,255,…) на светлой теме превращаются в невидимые пятна. */
  --glass-bg:    rgba(255, 255, 255, 0.045);
  --glass-line:  rgba(255, 255, 255, 0.09);
  --surface-1:   rgba(228, 235, 245, 0.06);
  --surface-2:   rgba(228, 235, 245, 0.12);
}

/* ── Светлая тема: переопределяет переменные при data-theme="light" ──
   Фон почти белый с холодным подтоном, карточки белые. Sapphire остаётся
   заливкой с белым текстом и здесь же становится цветом текста: на светлом
   фоне у него 5.9:1. Azure на светлом фоне даёт 3.0:1 — в текст не годится,
   он остаётся в обводках и подсветках. */
:root[data-theme="light"] {
  --color-bg:          #EDF1F7;
  --color-bg-rgb:      237, 241, 247;
  --color-card:        #FFFFFF;
  --color-card2:       #DEE6F0;
  --color-border:      #C5D0DE;

  --color-accent:      #6D4AFF;
  --color-on-accent:   #FFFFFF;
  --color-accent-text: #5B3FD6;
  --color-accent-soft: rgba(109, 74, 255, 0.10);
  --color-accent-glow: rgba(109, 74, 255, 0.22);

  --color-green:       #1E8A4E;
  --color-on-green:    #FFFFFF;
  --color-orange:      #8A5A00;
  /* --color-orange-fill и --color-on-orange наследуются от :root:
     светлая плашка с тёмным текстом одинаково работает в обеих темах. */

  --color-text:        #0B1220;
  --color-mid:         #4B5A6E;
  --color-muted:       #6B7A8D;

  --gradient-accent: linear-gradient(140deg, #6D4AFF 0%, #9575FF 100%);
  --shadow-card: 0 4px 24px rgba(11, 18, 32, 0.10);
  --shadow-btn:  0 8px 20px rgba(11, 18, 32, 0.16);

  --topbar-bg: rgba(237, 241, 247, 0.9);

  --glass-bg:    rgba(255, 255, 255, 0.72);
  --glass-line:  rgba(11, 18, 32, 0.10);
  --glass-border: rgba(11, 18, 32, 0.10);
  --surface-1:   rgba(11, 18, 32, 0.05);
  --surface-2:   rgba(11, 18, 32, 0.10);
}