html {
  font-size: 14px;
}

:root {
  --kl-primary: #e445ff;
  --kl-primary-strong: #c92fe8;
  --kl-dark: #141418;
  --kl-surface: #1b1b21;
  --kl-surface-2: #22222b;
  --kl-border: #2f2f3a;
  --kl-text: #f4f2fa;
  --kl-text-muted: #b5b1c2;
  --bs-primary: #e445ff;
  --bs-primary-rgb: 228, 69, 255;
  --bs-dark: #141418;
  --bs-dark-rgb: 20, 20, 24;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .15rem rgba(228, 69, 255, .2), 0 0 0 .35rem rgba(228, 69, 255, .35);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  background: var(--kl-dark);
  color: var(--kl-text);
  margin-bottom: 0;
}

.navbar {
  background: var(--kl-surface) !important;
  border-color: var(--kl-border) !important;
}

.navbar-brand {
  color: var(--kl-text) !important;
}

/* ─── kindergartenlab Logo ─── */
.kl-logo {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .02em;
  text-transform: lowercase;
  color: var(--kl-text) !important;
  text-decoration: none !important;
  transition: color .25s;
}
.kl-logo:hover { color: var(--kl-primary) !important; }
.kl-logo:hover .kl-logo-lab { color: var(--kl-primary) !important; }
.kl-logo-lab {
  color: var(--kl-primary);
  font-weight: 900;
}

/* Homepage hero */
.kl-hero-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 5.5rem);
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--kl-text);
  line-height: 1;
  margin-bottom: .35rem;
}
.kl-hero-logo .kl-logo-lab {
  color: var(--kl-primary);
  font-weight: 900;
}
.kl-hero-tagline {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: clamp(.95rem, 2vw, 1.25rem);
  color: var(--kl-text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.nav-link,
a {
  color: var(--kl-text);
}

a:hover {
  color: var(--kl-primary);
}

.btn-primary {
  background-color: var(--kl-primary);
  border-color: var(--kl-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--kl-primary-strong) !important;
  border-color: var(--kl-primary-strong) !important;
}

.btn-outline-secondary {
  color: var(--kl-text);
  border-color: var(--kl-border);
  background: transparent;
}

.btn-outline-secondary:hover {
  background: var(--kl-surface-2);
  border-color: var(--kl-primary);
  color: var(--kl-text);
}

.btn-kl-users {
  color: var(--kl-text);
  border: 1px solid var(--kl-primary);
  background: rgba(var(--bs-primary-rgb), .12);
  font-weight: 700;
}

.btn-kl-users:hover,
.btn-kl-users:focus,
.btn-kl-users:active {
  color: #fff !important;
  border-color: var(--kl-primary) !important;
  background: var(--kl-primary) !important;
}

.btn-kl-moderator {
  color: var(--kl-text);
  border: 1px solid #22d3ee;
  background: rgba(34, 211, 238, .12);
  font-weight: 700;
}

.btn-kl-moderator:hover,
.btn-kl-moderator:focus,
.btn-kl-moderator:active {
  color: #fff !important;
  border-color: #22d3ee !important;
  background: #22d3ee !important;
}

.btn-dark {
  background: var(--kl-dark);
  border-color: var(--kl-border);
  color: var(--kl-text);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
  background: #0f0f13 !important;
  border-color: var(--kl-primary) !important;
}

.text-secondary {
  color: var(--kl-text-muted) !important;
}

.card {
  background: var(--kl-surface);
  border: 1px solid var(--kl-border) !important;
  color: var(--kl-text);
}

.form-control,
.form-select {
  background: var(--kl-surface-2);
  border: 1px solid var(--kl-border);
  color: var(--kl-text);
}

.form-control::placeholder,
.form-select::placeholder {
  color: #9a95aa;
}

.form-control:focus,
.form-select:focus {
  background: var(--kl-surface-2);
  border-color: var(--kl-primary);
  color: var(--kl-text);
}

.form-label,
h1, h2, h3, h4, h5, h6,
.fw-bold {
  color: var(--kl-text);
}

.alert-danger {
  background: rgba(220, 53, 69, .18);
  border-color: rgba(220, 53, 69, .4);
  color: #ffd7de;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}