/* These styles are generated from project.scss. */

/* ---------------------------------------------------------------------------
 * Brand theme for standalone (Bootstrap) pages — auth, about, profile edit.
 * Tokens come from theme.css so these pages match the app surfaces exactly.
 * ------------------------------------------------------------------------- */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-ink); }

.container { color: var(--text); padding-top: 18px; padding-bottom: 40px; }

hr { border-color: var(--line); opacity: 1; }

/* Navbar */
.navbar.bg-light {
  background: rgba(14, 11, 22, 0.85) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.navbar .navbar-brand {
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.navbar-light .navbar-nav .nav-link { color: var(--muted); }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-item.active .nav-link { color: var(--text); }
.navbar-toggler { border-color: var(--line); }
.navbar-toggler-icon { filter: invert(1) opacity(0.7); }

/* Cards / lists */
.card,
.list-group-item {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
  border-radius: var(--radius-sm);
}

/* Forms */
label,
legend,
.form-label { color: var(--text); }
.form-text,
.helptext,
small.text-muted,
.text-muted { color: var(--muted) !important; }

.form-control,
.form-select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.form-control:focus,
.form-select:focus {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(177, 77, 255, 0.25);
}
.form-control::placeholder { color: var(--faint); }

/* Buttons */
.btn-primary {
  background: var(--grad);
  border: none;
  box-shadow: var(--glow);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background: var(--grad); filter: brightness(1.06); }
.btn-secondary,
.btn-outline-secondary {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
}
.btn-outline-primary { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover { background: var(--accent); color: #fff; }

/* Alerts */
.alert {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.alert-success { border-left: 3px solid var(--accent-2); }
.alert-info { border-left: 3px solid #36a2ff; }
.alert-warning { border-left: 3px solid #ffb24d; }
.btn-close { filter: invert(1); }

.alert-debug {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line);
}

.alert-error {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line);
  border-left: 3px solid var(--like);
}