/* ─────────────────────────────────────────────────────────────────────────
   BonkiPay Cabinet — design-system token foundation (Phase 1.4B)
   CSS-only. Премиальная основа light/dark тем + базовые компонент-примитивы.

   Загрузка: подключается ПОСЛЕ app.css на страницах /login и /register
   (автономные шаблоны, не наследуют base.html). app.css не редактируется,
   поэтому admin/cabinet (base.html) сохраняют текущий вид без регрессий.
   Порядок «после app.css» нужен, чтобы light-дефолт перекрыл легаси-палитру
   из :root в app.css. Платформенное распространение — инкрементально позже.

   Тема:
   - :root            → LIGHT по умолчанию
   - [data-theme=dark]→ DARK (явный выбор)
   - prefers-color-scheme: dark (без data-theme) → DARK (безопасный fallback,
     сохраняет привычный тёмный вид для тёмных окружений)
   ───────────────────────────────────────────────────────────────────────── */

/* ── LIGHT (default) ─────────────────────────────────────────────────────── */
:root {
  /* Палитра */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-soft: #f1f5f9;
  --text: #0f1726;
  --muted: #5b6b80;
  --border: #e2e8f0;
  --accent: #2f6fed;
  --accent-hover: #2557c4;

  /* Статусы */
  --success: #1f9d57;
  --success-bg: #e7f7ee;
  --warning: #b7791f;
  --warning-bg: #fdf4e3;
  --danger: #d92d20;
  --danger-bg: #fdeceb;
  --info: #2f6fed;
  --info-bg: #e8f0fe;

  /* Типографика */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.75rem;
  --lh-body: 1.5;
  --lh-heading: 1.25;

  /* Spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadow / elevation */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.10);
  --sh-2: 0 4px 12px rgba(15, 23, 42, 0.10);
  --sh-3: 0 12px 32px rgba(15, 23, 42, 0.18);

  /* Focus */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Compatibility aliases (для будущей миграции cabinet/admin) */
  --cab-bg: var(--bg);
  --cab-surface: var(--surface);
  --cab-text: var(--text);
  --cab-muted: var(--muted);
  --cab-border: var(--border);
  --cab-accent: var(--accent);
  --cab-radius-card: var(--r-lg);

  /* ── Расширенные токены (14.27, LIGHT THEME FULL ROLLOUT) ────────────────
     Производные от базовой палитры — наследуют тему автоматически через var().
     Тематические перекрытия нужны только для --surface-elevated. */
  --surface-elevated: #ffffff;
  --card-bg: var(--surface);
  --card-border: var(--border);
  --sidebar-bg: var(--surface);
  --sidebar-border: var(--border);
  --input-bg: var(--surface);
  --input-border: var(--border);
  --input-focus: var(--accent);
  --table-head-bg: var(--surface-soft);
  --table-row-hover: var(--surface-soft);
  --badge-bg: var(--surface-soft);
  --badge-text: var(--muted);
  --disabled-opacity: 0.55;
  --disabled-text: var(--muted);
  --focus-ring: var(--accent);
}

/* ── DARK token-набор (общий для media-fallback и явного выбора) ──────────── */
[data-theme="dark"] {
  --bg: #0f1419;
  --surface: #1a2332;
  --surface-soft: #121a25;
  --text: #e7ecf3;
  --muted: #8b9aad;
  --border: #2d3a4d;
  --accent: #3d8bfd;
  --accent-hover: #5a9dff;

  --success: #3fb950;
  --success-bg: #132a1d;
  --warning: #d9a514;
  --warning-bg: #2a2410;
  --danger: #f85149;
  --danger-bg: #2c1615;
  --info: #5a9dff;
  --info-bg: #14233a;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --sh-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sh-3: 0 12px 34px rgba(0, 0, 0, 0.55);

  --surface-elevated: #20293a;
}

/* Безопасный fallback: тёмное окружение без явного выбора темы → DARK */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1419;
    --surface: #1a2332;
    --surface-soft: #121a25;
    --text: #e7ecf3;
    --muted: #8b9aad;
    --border: #2d3a4d;
    --accent: #3d8bfd;
    --accent-hover: #5a9dff;

    --success: #3fb950;
    --success-bg: #132a1d;
    --warning: #d9a514;
    --warning-bg: #2a2410;
    --danger: #f85149;
    --danger-bg: #2c1615;
    --info: #5a9dff;
    --info-bg: #14233a;

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --sh-2: 0 4px 14px rgba(0, 0, 0, 0.45);
    --sh-3: 0 12px 34px rgba(0, 0, 0, 0.55);

    --surface-elevated: #20293a;
  }
}

/* ── База: типографика и формы ───────────────────────────────────────────── */
/* Формы должны наследовать шрифт документа (фикс браузерного Arial). */
input, button, select, textarea {
  font-family: inherit;
}

/* Видимый focus-ring (аддитивно, ничего не снимаем без замены). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
}

/* ── Компонент-примитивы (аддитивные, opt-in; имена без коллизий) ────────── */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-soft); }
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-primary[aria-disabled="true"],
.btn-secondary[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: var(--sp-5);
}

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  text-align: center;
  color: var(--muted);
  background: var(--surface-soft);
}
.empty-state strong {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--text);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
}
.status-chip--ready,
.status-chip--success { color: var(--success); background: var(--success-bg); }
.status-chip--warning { color: var(--warning); background: var(--warning-bg); }
.status-chip--blocked,
.status-chip--danger { color: var(--danger); background: var(--danger-bg); }
.status-chip--info { color: var(--info); background: var(--info-bg); }
.status-chip--none { color: var(--muted); background: var(--surface-soft); }

/* ── Тематизация существующих auth-страниц через токены ──────────────────── */
/* Перекрывает легаси-хардкоды из app.css на /login и /register
   (загрузка после app.css; правок app.css не требуется). */
body.auth-body {
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-body);
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.auth-card h1 {
  color: var(--text);
  line-height: var(--lh-heading);
}
.auth-card label { color: var(--muted); }
.auth-card input {
  min-height: 44px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.auth-card input:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
  border-color: var(--accent);
}
.auth-card button {
  min-height: 44px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-sm);
}
.auth-card button:hover { background: var(--accent-hover); }
.auth-footer a { color: var(--accent); }
.auth-footer a:hover { color: var(--accent-hover); }
.auth-card .pwd-hint { color: var(--muted); }