/* Единый набор токенов для всех страниц сервиса.
 *
 * Раньше палитра лежала копиями в index.html, login.html и setup.html, а
 * правовые страницы жили в собственных цветах. Сменить акцент означало
 * править четыре места, и одно из них всегда забывалось — вход оставался
 * синим при уже перекрашенной панели.
 *
 * Отдаётся маршрутом /theme.css без входа: страница входа и мастер
 * установки открываются до авторизации, и без цветов они выглядели бы голыми.
 *
 * Кабинет клиента (app.html) сюда НЕ входит намеренно: он берёт цвета у
 * Telegram, чтобы выглядеть родным внутри мессенджера, и открывается там,
 * где нашего сервера может не быть под рукой.
 */

/* ═══ ТОКЕНЫ: светлая тема (полный набор) ═══════════════════════════ */
:root{
  --bg:#f4f4f5; --surface:#ffffff; --surface-2:#f4f4f5; --surface-3:#ebebed;
  --border:#e3e3e6; --border-soft:#eeeef0; --control-line:#c2c2c8;
  --text:#0f0f10; --text-2:#3c3c41; --muted:#616166; --faint:#6e6e73;

  --accent:#2481cc; --accent-hover:#1c6cae; --on-accent:#ffffff;
  --accent-soft:#e9f2fb; --accent-line:#c6dff5;

  --good:#157a46; --good-bg:#e6f6ec;
  --warn:#8a5d00; --warn-bg:#fcf3dc;
  --info:#2481cc; --info-bg:#e9f2fb;
  --violet:#6a55c7; --violet-bg:#eeeafb;
  --bad:#b3261e; --bad-bg:#fdecea;
  --off:#8e8e93;

  --side:#ffffff; --side-text:#3c3c41; --side-muted:#616166; --side-active:#f0f0f2;
  --side-on-active:#0f0f10;

  /* Рамка всего, с чем взаимодействуют: поля, списки, кнопки-призраки,
     переключатели. Отдельно от --border: разделители между строками остаются
     волосяными, а границу элемента, в который вводят, надо видеть — на белом
     фоне --border не читался совсем.
     Значение подобрано на глаз, а не по норме: тёмная линия формально
     проходит контраст, но выглядит жирной и спорит с тонкими разделителями.
     Отступление записано в ACCEPTED в tests/check_contrast.py. */
  --control-line:#c2c2c8;

  --radius:12px; --radius-sm:9px; --radius-xs:7px; --pill:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 3px 12px rgba(0,0,0,.08);
  --shadow-lg:0 8px 28px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:28px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;

  /* Шкала кегля. Раньше размеры стояли числами по месту — их набралось два
     десятка, и разница в полпикселя читалась не как замысел, а как опечатка.
     Ступени подобраны по тому, что уже было в ходу: ничего заметно не
     поехало, но новых значений больше не заводим. */
  --fs-2xs:10.5px;   /* надзаголовки, разрядка */
  --fs-xs:11.5px;    /* подписи под полем, мелкие пояснения */
  --fs-sm:12.5px;    /* кнопки, второстепенный текст */
  --fs-base:13px;    /* основной текст интерфейса */
  --fs-md:13.5px;    /* заголовок карточки, вкладка */
  --fs-lg:14.5px;    /* заголовок окна, название сервиса */
  --fs-xl:17px;      /* заголовок раздела на телефоне */
  --fs-2xl:19px;     /* заголовок раздела */
  --fs-3xl:23px;     /* крупные числа на дашборде */

  /* Размеры управляющих элементов — один ряд на всю панель.
     Кнопка, поле и квадратная кнопка-иконка равны по высоте: только так
     правый край строки совпадает во всех разделах. */
  --ctl:32px;        /* кнопка, поле ввода, кнопка в шапке */
  --ctl-sm:28px;     /* кнопка-иконка внутри строки */
  --ic:15px;         /* значок внутри кнопки */
  --ic-sm:14px;      /* значок внутри кнопки-иконки */

  /* Квадрат со значком и аватарка — четыре ступени, больше не заводим.
     Скругление растёт вместе с размером, поэтому форма у всех одна.
     Раньше таких квадратов было шесть видов: 26, 28, 30, 32, 34 и 48
     с радиусами 7, 8, 9, 10 и 12 — рядом это читалось как небрежность. */
  --box-sm:28px; --box-sm-r:8px;   /* значок в строке, в шапке карточки */
  --box:32px;    --box-r:9px;      /* основной значок, аватарка в списке */
  --box-lg:40px; --box-lg-r:11px;  /* логотип сервиса */
  --box-xl:48px; --box-xl-r:13px;  /* аватарка в шапке карточки клиента */
}

/* системная тёмная (когда явный выбор не сделан) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="night"]){
    --bg:#17212b; --surface:#1d2733; --surface-2:#141c25; --surface-3:#242f3d;
    --border:#2b3948; --border-soft:#232f3c; --control-line:#43566c; --control-line:#43566c;
    --text:#ffffff; --text-2:#c3d0dd; --muted:#8ea3b8; --faint:#8698ac;
    --accent:#5288c1; --accent-hover:#6a9ed3; --on-accent:#ffffff;
    --accent-soft:#1e3448; --accent-line:#2b5278;
    --good:#4dc08a; --good-bg:#152a24; --warn:#e0a63a; --warn-bg:#2b2416;
    --info:#6ab7ff; --info-bg:#14273a; --violet:#a294ec; --violet-bg:#221e38;
    --bad:#ff8a80; --bad-bg:#2e1a19;
    --off:#78899a;
    --side:#17212b; --side-text:#c3d0dd; --side-muted:#8ea3b8; --side-active:#2b5278;
  --side-on-active:#ffffff;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 3px 12px rgba(0,0,0,.42);
    --shadow-lg:0 8px 28px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.32);
  }
}
/* явный выбор тёмной — палитра Telegram «Тёмная» */
:root[data-theme="dark"]{
  --bg:#17212b; --surface:#1d2733; --surface-2:#141c25; --surface-3:#242f3d;
  --border:#2b3948; --border-soft:#232f3c; --control-line:#43566c;
  --text:#ffffff; --text-2:#c3d0dd; --muted:#8ea3b8; --faint:#8698ac;
  --accent:#5288c1; --accent-hover:#6a9ed3; --on-accent:#ffffff;
  --accent-soft:#1e3448; --accent-line:#2b5278;
  --good:#4dc08a; --good-bg:#152a24; --warn:#e0a63a; --warn-bg:#2b2416;
  --info:#6ab7ff; --info-bg:#14273a; --violet:#a294ec; --violet-bg:#221e38;
  --bad:#ff8a80; --bad-bg:#2e1a19;
  --off:#78899a;
  --side:#17212b; --side-text:#c3d0dd; --side-muted:#8ea3b8; --side-active:#2b5278;
  --side-on-active:#ffffff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 3px 12px rgba(0,0,0,.42);
  --shadow-lg:0 8px 28px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.32);
}
/* «Ночная» — чёрная, для OLED-экранов */
:root[data-theme="night"]{
  --bg:#000000; --surface:#111112; --surface-2:#09090a; --surface-3:#1c1c1e;
  --border:#242427; --border-soft:#19191b; --control-line:#414148;
  --text:#ffffff; --text-2:#c7c7cc; --muted:#8d8e93; --faint:#85858b;
  --accent:#3e88f7; --accent-hover:#5b9cf9; --on-accent:#ffffff;
  --accent-soft:#0c1a2d; --accent-line:#1c3a63;
  --good:#35c759; --good-bg:#0d2214; --warn:#ff9f0a; --warn-bg:#2a1d05;
  --info:#3e88f7; --info-bg:#0c1a2d; --violet:#8774e1; --violet-bg:#1b1730;
  --bad:#ff453a; --bad-bg:#2a1110;
  --off:#85858b;
  --side:#000000; --side-text:#c7c7cc; --side-muted:#8d8e93; --side-active:#1c1c1e;
  --side-on-active:#ffffff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.6);
  --shadow-md:0 3px 12px rgba(0,0,0,.65);
  --shadow-lg:0 8px 28px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.5);
}
/* явный выбор светлой */
:root[data-theme="light"]{
  --bg:#f4f4f5; --surface:#ffffff; --surface-2:#f4f4f5; --surface-3:#ebebed;
  --border:#e3e3e6; --border-soft:#eeeef0; --control-line:#c2c2c8;
  --text:#0f0f10; --text-2:#3c3c41; --muted:#616166; --faint:#6e6e73;

  --accent:#2481cc; --accent-hover:#1c6cae; --on-accent:#ffffff;
  --accent-soft:#e9f2fb; --accent-line:#c6dff5;

  --good:#157a46; --good-bg:#e6f6ec;
  --warn:#8a5d00; --warn-bg:#fcf3dc;
  --info:#2481cc; --info-bg:#e9f2fb;
  --violet:#6a55c7; --violet-bg:#eeeafb;
  --bad:#b3261e; --bad-bg:#fdecea;
  --off:#8e8e93;

  --side:#ffffff; --side-text:#3c3c41; --side-muted:#616166; --side-active:#f0f0f2;
  --side-on-active:#0f0f10;
}