@font-face {
  font-family: Manrope;
  src: url("/assets/fonts/Manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --dd-charcoal: #171B1A;
  --dd-lime: #A5CF46;
  --dd-pale: #D5E8A9;
  --dd-paper: #F7F8F5;
  --dd-sage: #8BA4A0;
  --dd-muted: #4D5B54;
  --dd-line: #DCE3D8;
  --dd-control: #768479;
  --bg: #F7F8F5;
  --ink: #171B1A;
  --muted: #4D5B54;
  --brand: #A5CF46;
  --brand-d: #171B1A;
  --brand-l: #D5E8A9;
}
html, body {
  background: #F7F8F5;
  color: #171B1A;
  font-family: Manrope, system-ui, sans-serif;
}
h1, h2, h3, h4 { color: #171B1A; font-weight: 600; }
/* Links on light surfaces are charcoal and underlined. Lime is not a text colour there. */
a { color: #171B1A; text-decoration: underline; text-underline-offset: 3px; }
.apphdr, .topbar {
  background: #171B1A;
  color: #fff;
}
.apphdr .hlogo, .topbar .hlogo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
}
.hlogo img { height: 30px; width: auto; display: block; }
.dd-wordmark {
  color: #171B1A;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
  font-size: 18px;
}
.apphdr a, .topbar a, .apphdr .dd-wordmark, .topbar .dd-wordmark { color: #fff; text-decoration: none; }
button, .btn, .vcstart, .logout, .adminbtn, .tab, .fab, .um-btn, .newspost, .ccopt, .nav-ccopt {
  border-radius: 999px;
  text-decoration: none;
}
button[type="submit"], .btn:not(.secondary):not(.tertiary), .vcstart, .newspost, .um-save {
  background: #A5CF46;
  color: #171B1A;
  border-color: transparent;
}
button.secondary, .btn.secondary {
  background: #171B1A;
  color: #fff;
  border-color: transparent;
}
button.tertiary, .btn.tertiary {
  background: #fff;
  color: #171B1A;
  border: 1px solid #768479;
}
input, select, textarea { border-radius: 12px; }
.panel, .card, .tile, .banner { border-radius: 16px; }
/* Log out stays outlined: white border and white text on the charcoal header. */
.apphdr .logout,
.topbar .logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #fff;
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.apphdr .logout:hover,
.topbar .logout:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
  opacity: 1;
}
.apphdr .logout:focus-visible,
.topbar .logout:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  color: #fff;
  opacity: 1;
}
.apphdr .logout svg,
.topbar .logout svg {
  color: inherit;
  opacity: 1;
}
.apphdr .hlogo:focus-visible,
.topbar a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}