:root, :root.dark {
  --background: 0 0% 5.1%;
  --foreground: 0 0% 96.1%;
  --card: 0 0% 10.2%;
  --card-foreground: 0 0% 96.1%;
  --popover: 0 0% 10.2%;
  --popover-foreground: 0 0% 96.1%;
  --primary: 0 0% 100%;
  --primary-foreground: 0 0% 5.1%;
  --secondary: 0 0% 14.1%;
  --secondary-foreground: 0 0% 96.1%;
  --muted: 0 0% 14.1%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 20%;
  --accent-foreground: 0 0% 96.1%;
  --destructive: 6.8 71.2% 56.5%;
  --destructive-foreground: 0 0% 5.1%;
  --border: 0 0% 20%;
  --input: 0 0% 14.1%;
  --ring: 0 0% 100%;
  --radius: 0px;
}
html, body {
  background-color: #0D0D0D;
  color: #F5F5F5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
code, pre, .font-mono {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
/* Status pips: gatus ships these as literal Tailwind utilities rather
   than CSS variables, so the CLC feedback palette has to override the
   classes directly. success/error keep the same hue on hover (500 and
   700 in gatus's scale both map to the one brand color -- CLC's design
   system does not carry a darker hover step for status pips). */
.bg-green-400, .bg-green-500, .bg-green-700, .bg-success { background-color: #36A232 !important; }
.bg-red-400, .bg-red-500, .bg-red-700 { background-color: #DF5341 !important; }
.bg-yellow-400 { background-color: #FBBF24 !important; }