/**
 * Vacancy Bot — design tokens и переопределения Bootstrap 5.
 * Один бренд, сетка 8px, доступные контрасты.
 */

:root {
  /* Brand */
  --vb-brand: #667eea;
  --vb-brand-dark: #764ba2;
  --vb-brand-rgb: 102, 126, 234;
  --vb-gradient: linear-gradient(135deg, var(--vb-brand) 0%, var(--vb-brand-dark) 100%);

  /* Bootstrap mapping */
  --bs-primary: var(--vb-brand);
  --bs-primary-rgb: var(--vb-brand-rgb);
  --bs-link-color: var(--vb-brand);
  --bs-link-hover-color: #5568d3;
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: #212529;
  --bs-body-bg: #f8f9fa;

  /* Spacing scale (8px base) */
  --vb-space-1: 0.25rem;
  --vb-space-2: 0.5rem;
  --vb-space-3: 1rem;
  --vb-space-4: 1.5rem;
  --vb-space-5: 2rem;
  --vb-space-6: 2.5rem;

  /* Surfaces */
  --vb-surface: #ffffff;
  --vb-surface-muted: #f8f9fa;
  --vb-border: #dee2e6;
  --vb-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --vb-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  --vb-shadow-lg: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.12);

  /* Legacy aliases (site.css) */
  --public-gradient-start: var(--vb-brand);
  --public-gradient-end: var(--vb-brand-dark);
  --primary-color: var(--vb-brand);
}

/* Focus visible (a11y) */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--vb-brand-rgb), 0.35);
}

.btn-primary {
  --bs-btn-bg: var(--vb-brand);
  --bs-btn-border-color: var(--vb-brand);
  --bs-btn-hover-bg: #5a6fd6;
  --bs-btn-hover-border-color: #5a6fd6;
  --bs-btn-active-bg: #5568d3;
  --bs-btn-active-border-color: #5568d3;
}

.navbar-dark.bg-primary {
  background: var(--vb-gradient) !important;
}

/* Auth pages (login / register) */
.vb-auth-page {
  background: var(--vb-gradient);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--vb-space-4) var(--vb-space-3);
}

.vb-auth-card {
  background: var(--vb-surface);
  border-radius: var(--bs-border-radius-xl);
  padding: var(--vb-space-6);
  max-width: 28rem;
  width: 100%;
  box-shadow: var(--vb-shadow-lg);
}

.vb-auth-icon {
  font-size: 3rem;
  color: var(--vb-brand);
  text-align: center;
  margin-bottom: var(--vb-space-3);
  line-height: 1;
}

.vb-auth-title {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: #333;
  margin-bottom: var(--vb-space-2);
}

.vb-auth-lead {
  text-align: center;
  color: #6c757d;
  font-size: 0.9375rem;
  margin-bottom: var(--vb-space-4);
  line-height: 1.5;
}

.vb-auth-divider {
  display: flex;
  align-items: center;
  margin: var(--vb-space-4) 0;
}

.vb-auth-divider::before,
.vb-auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--vb-border);
}

.vb-auth-divider span {
  padding: 0 var(--vb-space-3);
  color: #6c757d;
  font-size: 0.875rem;
}

.vb-link-brand {
  color: var(--vb-brand);
  text-decoration: none;
}

.vb-link-brand:hover {
  color: var(--vb-brand-dark);
  text-decoration: underline;
}

.btn-telegram {
  background: #0088cc;
  border: none;
  color: #fff;
}

.btn-telegram:hover {
  background: #0077b5;
  color: #fff;
}

/* Dev banner (регистрация и вход остаются доступны) */
.vb-dev-banner {
  width: 100%;
  background: #e7f1ff;
  border-bottom: 1px solid #b6d4fe;
  color: #084298;
  font-size: 0.875rem;
  padding: var(--vb-space-2) var(--vb-space-3);
  text-align: center;
}

.vb-dev-banner a {
  color: #052c65;
  font-weight: 600;
}