:root {
  --accent: #1f7a8c;
  --accent-dark: #13505b;
  --surface: #f7f7f2;
  --ink: #1d1e2c;
}

body {
  font-family: "Space Grotesk", sans-serif;
  background: radial-gradient(circle at 10% 10%, rgba(31, 122, 140, 0.08), transparent 40%),
    linear-gradient(135deg, #f7f7f2, #f0f4f7);
  color: var(--ink);
}

.navbar-white {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card {
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.small-box {
  border-radius: 14px;
}

.btn-primary,
.bg-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.btn-outline-primary {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-outline-primary:hover {
  background-color: var(--accent);
  color: #fff;
}

.sidebar-dark-primary {
  background: linear-gradient(160deg, #0f2027, #203a43, #2c5364);
}

.main-sidebar .brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode {
  background: radial-gradient(circle at 10% 10%, rgba(31, 122, 140, 0.2), transparent 40%),
    linear-gradient(135deg, #0f1419, #1b2a33);
  color: #e9f1f4;
}

.dark-mode .card {
  background-color: #1c2b33;
  color: #e9f1f4;
}

.dark-mode .main-footer {
  background-color: #16232a;
  color: #e9f1f4;
}

.toggle-status {
  min-width: 90px;
}