:root {
  --pico-primary: #89b4fa;
  --pico-primary-hover: #89dceb;
  --pico-primary-focus: rgba(137, 180, 250, 0.25);
  --pico-muted-border-color: #45475a;
  --card-bg: #181825;
  --card-border: #313244;
  --card-hover-border: #89b4fa;
}

body {
  background-color: #11111b !important;
  color: #cdd6f4 !important;
}

article {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

article:hover {
  border-color: var(--card-hover-border) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45) !important;
}

.auth-badge {
  background: #1e1e2e !important;
  border-color: var(--pico-muted-border-color) !important;
  color: #cdd6f4 !important;
}

.badge {
  background: #313244 !important;
  color: #cdd6f4 !important;
}

.pack-grid > * {
  background: #1e1e2e !important;
  border-color: var(--card-border) !important;
  color: #cdd6f4 !important;
}

.pack-grid > a:hover {
  background: #313244 !important;
  border-color: var(--card-hover-border) !important;
}

.icon-light {
  color: #cdd6f4 !important;
}

.icon-dark {
  color: #11111b !important;
}