/* Единый визуальный язык мини-приложения и сайта.
   Пока index.html держит свою копию переменных внутри себя; на этапе 2,
   когда появится веб-плеер, он перейдёт на этот файл, и правка цвета
   в одном месте начнёт менять оба фронта. */
:root{
  --bg:#06060e;--surface:#0e0e1c;--card:#131320;--card2:#1a1a2c;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);
  --accent:#7c6fff;--a2:#4ecdc4;--gold:#f59e0b;--danger:#ef4444;--success:#22c55e;
  --text:#f0eeff;--muted:rgba(240,238,255,.42);--muted2:rgba(240,238,255,.18);
  --r:16px;--rsm:10px;
  /* Шкала отступов: все расстояния кратны шагу, иначе вёрстка «плывёт». */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
}

/* ── Оформление сайта (этап 3, задача 6) ───────────────────────────────────
   Всё, что ниже, — ДОБАВЛЕНО, значения выше не тронуты: их копия живёт внутри
   корневого index.html (мини-приложение этот файл не подключает), и правка
   существующего значения развела бы два фронта. Добавление новых переменных
   мини-приложения не касается вовсе.
   Правило простое: оформлению нужна величина — она заводится здесь, а не
   вписывается числом в правило. */
:root{
  /* Приглушённый текст. Сам --muted (прозрачность .42) на фоне --card даёт
     3.73:1 — ниже нормы 4.5:1 для обычного текста (WCAG AA). Здесь .6:
     на --card 6.36:1, на --card2 6.14:1, на --surface 6.45:1, на самой
     светлой точке фонового градиента 6.20:1 (числа посчитаны по формуле
     WCAG, таблица — в отчёте задачи 6 этапа 3).
     Раньше эта переменная объявлялась ЧЕТЫРЬМЯ копиями — в app.css и на трёх
     страницах входа; теперь она одна, и контраст правится в одном месте. */
  --muted-ac:rgba(240,238,255,.6);

  /* Главная кнопка. Оба стопа намеренно темнее фирменного --accent: у более
     светлой пары белая надпись давала 3.8:1 (см. комментарий в login.html).
     На #6a5cf0 белый текст — 4.77:1, на #4c3fe0 — 6.79:1. */
  --btn-a:#6a5cf0; --btn-b:#4c3fe0;
  --btn:linear-gradient(135deg,var(--btn-a),var(--btn-b));
  /* Свечение под кнопкой при наведении. Цвет — тот же --accent, но с
     прозрачностью: прибавить прозрачность к переменной-шестнадцатеричному
     цвету в CSS нечем, поэтому значение выписано числом рядом с исходным. */
  --btn-glow:0 6px 18px rgba(124,111,255,.30);

  /* Фон страницы: два спокойных пятна на основе --accent и --a2 поверх --bg.
     Изображений нет намеренно — каждая картинка это лишний запрос и риск не
     загрузиться там, где половина интернета заблокирована.
     Прозрачность подобрана ЧИСЛАМИ, а не на глаз: при .09/.05 самая светлая
     точка фона — rgb(20,25,44), и на ней --accent даёт 4.64:1, --danger
     4.65:1. Это важно: строка сообщения (.msg) лежит прямо на фоне, а не в
     карточке. При .14/.07 та же пара проваливалась (4.21:1).
     Размеры пятен — в процентах: пиксельных «магических» чисел не заводим. */
  --glow1:rgba(124,111,255,.09); --glow1-0:rgba(124,111,255,0);
  --glow2:rgba(78,205,196,.05);  --glow2-0:rgba(78,205,196,0);
  --page-bg:
    radial-gradient(120% 90% at 50% -20%,var(--glow1),var(--glow1-0) 60%),
    radial-gradient(100% 80% at 100% 0%,var(--glow2),var(--glow2-0) 55%),
    var(--bg);

  /* Высоты двух фиксированных полос внизу экрана. Отсюда же считается нижний
     отступ содержимого (см. view-site.css/view-app.css): раньше это были три
     несвязанных числа, и правка высоты панели в одном месте роняла бы текст
     под панель в другом.
     --nav-h — настоящая высота панели, она задана правилом.
     --bar-h — высота полосы плеера С ЗАПАСОМ: жёсткой высоты у полосы нет,
     её задают кнопка и системный шрифт, а он на другой платформе может
     оказаться крупнее. Живой замер здесь — 65px, заложено 72px; отступ
     содержимого считается как эта высота плюс --s5, поэтому даже при
     расхождении текст под полосу не уедет. */
  --nav-h:60px; --bar-h:72px;

  /* Сетка категорий в виде «сайт»: минимальная ширина карточки. Меньше —
     название категории с описанием перестаёт читаться. */
  --cat-min:280px;

  /* Скругление «пилюли»: бейджи и точки-индикатор онбординга. */
  --rpill:999px;

  /* Длительности переходов. Сами переходы объявляются ТОЛЬКО внутри
     @media (prefers-reduced-motion:no-preference) — при системной настройке
     «уменьшить движение» их нет вовсе, а не «покороче». */
  --t1:.15s; --t2:.25s;
}