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

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* ---- TEMS API host chrome (home + allauth pages share base.html) ----------- */

:root {
  --tems-ink: #0f172a;        /* slate-900 */
  --tems-ink-soft: #475569;   /* slate-600 */
  --tems-line: #e2e8f0;       /* slate-200 */
  --tems-green: #16a34a;      /* accent — Tazama green */
  --tems-green-dark: #15803d;
}

body {
  color: var(--tems-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

.tems-nav {
  background: var(--tems-ink);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.tems-nav .nav-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
}

.tems-nav .nav-link:hover,
.tems-nav .nav-link:focus {
  color: #fff;
}

.tems-nav .tems-nav-cta {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.4rem;
  padding: 0.3rem 0.85rem;
  margin-left: 0.5rem;
  color: #fff;
}

.tems-nav .tems-nav-cta:hover,
.tems-nav .tems-nav-cta:focus {
  border-color: var(--tems-green);
  background: var(--tems-green);
}

.tems-brand {
  color: #fff;
  font-weight: 650;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.tems-brand:hover,
.tems-brand:focus {
  color: #fff;
}

.tems-brand-dim {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 450;
}

/* Brand mark: black/red/green bars — a quiet nod to the flag. */
.tems-brand-mark {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 0.25rem;
  background: linear-gradient(
    180deg,
    #fff 0%,
    #fff 33%,
    #cc2b2b 33%,
    #cc2b2b 66%,
    var(--tems-green) 66%,
    var(--tems-green) 100%
  );
}