/* ============================================================
   ОБОЛОЧКА · страница входа в закрытые инструменты (auth.sipita.ru, SER-401)
   Экран отдаёт сторонняя программа без своих шаблонов. Вид берётся из ui/tokens.css:
   её цветовые переменные перекрываются нашими значениями (как у LiveKit, --lk-*).
   Ни одного цвета числом — только var(--…). Имя программы в файле и в адресе
   не пишется намеренно: страница не должна подсказывать, на чём сделан вход.
   Подключается на сервере (nginx дописывает ссылки перед </head>), не страницей.
   Переключатель темы — стили собирает build.py в skins/theme-switch.css, кнопку
   ставит nginx, поведение — /ds/theme.js (rules.md §4: переключатель на любой странице).
   ============================================================ */

html[data-theme]{
  --background:var(--bg);
  --foreground:var(--text);
  --card:var(--surface);
  --card-foreground:var(--text);
  --popover:var(--surface);
  --popover-foreground:var(--text);

  --primary:var(--gold);
  --primary-foreground:var(--text-on-accent);
  --secondary:var(--indigo);
  --secondary-foreground:var(--text-on-indigo);

  --muted:var(--surface-2);
  --muted-foreground:var(--text-2);
  --accent:var(--surface-2);
  --accent-foreground:var(--text);

  --destructive:var(--danger);
  --destructive-foreground:var(--text-on-accent);
  --success:var(--ok);
  --success-foreground:var(--text-on-accent);
  --warning:var(--warn);
  --warning-foreground:var(--text-on-accent);
  --info:var(--indigo);
  --info-foreground:var(--text-on-indigo);

  --border:var(--line);
  --input:var(--line-strong);
  --ring:var(--gold);
  --radius:var(--r-s);

  --custom-icon:var(--text);
  --custom-loading-bar:var(--gold);
  --divider:var(--line);
}

html[data-theme],
html[data-theme] body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
}

/* Заголовок экрана — как заголовок страницы в системе */
html[data-theme] h5{font-size:var(--fs-xl);line-height:var(--lh-xl);font-weight:var(--fw-medium)}

/* Главное действие — золотая кнопка, как .btn-main: без заглавных букв, высота 44, радиус карточечный */
html[data-theme] button.bg-primary{
  text-transform:none;font-size:var(--fs-base);font-weight:var(--fw-medium);
  min-height:44px;border:var(--bw) solid var(--gold-active);border-radius:var(--r-m);
  color:var(--text-on-accent);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
html[data-theme] button.bg-primary:hover{background:var(--gold-hover);border-color:var(--gold-hover)}
html[data-theme] button.bg-primary:active{background:var(--gold-active)}
html[data-theme] button.bg-primary:focus-visible{outline:none;box-shadow:var(--focus)}

/* Подписи и ссылки цвета «primary» — золото на белом не читается, берём текстовое золото */
html[data-theme] .text-primary{color:var(--gold-text)}

/* Поля — граница темнеет под курсором, в фокусе золотая (как в 40-input) */
html[data-theme] input{font-family:inherit;font-size:var(--fs-base);color:var(--text);border-radius:var(--r-s)}
html[data-theme] input:hover{border-color:var(--line-strong)}
html[data-theme] input:focus{border-color:var(--gold)}

/* Карточка вокруг формы — как .card на странице входа офиса */
html[data-theme] [class*="max-w-[444px]"]{
  background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-1);padding-top:var(--s-5);padding-bottom:var(--s-5);
}

/* Узкий экран: карточка не липнет к краям — боковые поля как у остальных экранов системы */
@media (max-width:480px){
  html[data-theme] [class*="max-w-[444px]"]{width:calc(100% - var(--s-5));box-sizing:border-box}
}

/* Убрано по решению владельца (02.11.2026): переключатель языка (язык берётся у браузера) и
   подпись разработчика под формой — страница не подсказывает, чем сделан вход. Прячутся и
   контейнеры, чтобы не оставалось пустых строк и лишних отступов. */
html[data-theme] #language-button,
html[data-theme] a[href^="https://www."][href$=".com"],
html[data-theme] div:has(> a[href^="https://www."][href$=".com"]){display:none}

html[data-theme] a{color:var(--link)}
html[data-theme] a:hover{color:var(--link-hover)}

/* Переключатель темы — кнопка в углу экрана (сам элемент — parts/34-theme-switch). На входе нет шапки,
   поэтому всегда угловой вариант; поверх карточки не ложится. */