/* Страница входа img.zaroni.ru (фотостудия, ff2card): палитры обеих тем, кегли, ритм, радиусы и базовые правила.

   До 07.10.2026 вход грузил весь /atelier/atelier.css. Atelier снят (работа переехала на https://wb.zaroni.ru), и
   из его стиля сюда перенесён ровно блок токенов и базовых правил — значения посимвольно те же, вход выглядит как
   раньше (снимки было/стало: uishot login, обе темы). Оформление самой формы — в <style> страницы login.html.

   Устройство тем. Значения каждой палитры объявлены РОВНО ОДИН раз (--d-* для тёмной, --l-* для светлой), а
   переключение — это переприсвоение рабочих имён. Базой стоит ТЁМНАЯ палитра: если CSS не догрузится, человек
   увидит привычный тёмный экран, а не белую вспышку. Контраст: webapp/scripts/contrast_check.py (WCAG 2.1). */
:root {
  /* --- значения: тёмная палитра --------------------------------------- */
  --d-bg: #0e1014;
  --d-panel: #161a21;
  --d-panel-2: #1d222b;
  --d-line: #272d38;
  --d-border-control: #697384;
  --d-ink: #e8ecf2;
  --d-ink-dim: #9aa4b2;
  /* было #6b7583 — 3.42:1 на --panel-2, провал AA при пороге 4.5 */
  --d-ink-mute: #8b94a3;
  --d-red: #ff5f56;
  --d-yellow: #ffbd2e;
  --d-green: #4ec9a5;
  --d-blue: #5aa9ff;
  /* было #4a5261 — 2.03:1. Это цвет статуса «данных нет» у числа health
     (healthColor, atelier.js:93), он обязан читаться, а не угадываться. */
  --d-grey: #8b94a3;
  /* Текст на заливке акцентом. В тёмной теме акцент светлый — текст тёмный. */
  --d-on-accent: #05121f;

  /* --- значения: светлая палитра --------------------------------------- */
  --l-bg: #f4f6f9;
  --l-panel: #ffffff;
  --l-panel-2: #eef1f5;
  --l-line: #dce1e9;
  --l-border-control: #767f8e;
  --l-ink: #161a21;
  --l-ink-dim: #4d5563;
  --l-ink-mute: #646d7c;
  --l-red: #c62f26;
  --l-yellow: #8a5a00;
  --l-green: #0f7355;
  --l-blue: #1a63c8;
  --l-grey: #646d7c;
  /* В светлой акцент тёмный, поэтому текст белый: прежний #05121f
     давал на кнопке 3.29 при пороге 4.5. */
  --l-on-accent: #ffffff;

  /* --- рабочие имена: по умолчанию тёмные ------------------------------ */
  --bg: var(--d-bg);
  --panel: var(--d-panel);
  --panel-2: var(--d-panel-2);
  --line: var(--d-line);
  --border-control: var(--d-border-control);
  --ink: var(--d-ink);
  --ink-dim: var(--d-ink-dim);
  --ink-mute: var(--d-ink-mute);
  --red: var(--d-red);
  --yellow: var(--d-yellow);
  --green: var(--d-green);
  --blue: var(--d-blue);
  --grey: var(--d-grey);
  --on-accent: var(--d-on-accent);
  color-scheme: dark;
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, .45);

  /* --- подложки ---------------------------------------------------------
     Раньше это были 29 литералов вида rgba(255,189,46,.09), прибитых к тёмному
     фону: смена палитры их не трогала. Теперь одна ручка --tint. */
  --tint: 14%;
  --tint-red: color-mix(in srgb, var(--red) var(--tint), transparent);
  --tint-yellow: color-mix(in srgb, var(--yellow) var(--tint), transparent);
  --tint-green: color-mix(in srgb, var(--green) var(--tint), transparent);
  --tint-blue: color-mix(in srgb, var(--blue) var(--tint), transparent);

  /* --- типографика ------------------------------------------------------
     Четыре кегля, а не три: 12px встречается 38 раз, 13px — 37, и разложить
     их руками по соседним ступеням дороже, чем держать один лишний токен. */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- ритм: шаг 4 вместо нынешних 19 разных значений отступа ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --radius: 12px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 99px;

  /* Тост обязан быть ВЫШЕ всплывающей панели: раньше оба стояли на 100 и
     порядок перекрытия решала позиция в DOM. */
  --z-topbar: 10;
  --z-drawer: 100;
  --z-toast: 200;

  --opacity-disabled: .62;

  /* Сцена отсмотра фото темой НЕ управляется: товар оценивают по кадру, и фон
     под ним не должен зависеть от настроения интерфейса. */
  --lb-stage: #0b0d11;
}

/* Системная тема — пока сотрудник не выбрал вручную. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--l-bg);
    --panel: var(--l-panel);
    --panel-2: var(--l-panel-2);
    --line: var(--l-line);
    --border-control: var(--l-border-control);
    --ink: var(--l-ink);
    --ink-dim: var(--l-ink-dim);
    --ink-mute: var(--l-ink-mute);
    --red: var(--l-red);
    --yellow: var(--l-yellow);
    --green: var(--l-green);
    --blue: var(--l-blue);
    --grey: var(--l-grey);
    --on-accent: var(--l-on-accent);
    color-scheme: light;
    --shadow-overlay: 0 16px 48px rgba(22, 26, 33, .18);
  }
}

/* Ручной выбор перекрывает системный. */
:root[data-theme="light"] {
  --bg: var(--l-bg);
  --panel: var(--l-panel);
  --panel-2: var(--l-panel-2);
  --line: var(--l-line);
  --border-control: var(--l-border-control);
  --ink: var(--l-ink);
  --ink-dim: var(--l-ink-dim);
  --ink-mute: var(--l-ink-mute);
  --red: var(--l-red);
  --yellow: var(--l-yellow);
  --green: var(--l-green);
  --blue: var(--l-blue);
  --grey: var(--l-grey);
  --on-accent: var(--l-on-accent);
  color-scheme: light;
  --shadow-overlay: 0 16px 48px rgba(22, 26, 33, .18);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 Inter, -apple-system, system-ui, sans-serif;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }