@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Instrument+Serif&display=swap');

/* :root:root outranks the flattened Tailwind :root block in app.css,
   which is linked after this stylesheet. */
:root:root {
  --background: 33 35% 94%;
  --foreground: 20 13% 9%;
  --card: 34 100% 99%;
  --card-foreground: 20 13% 9%;
  --popover: 34 100% 99%;
  --popover-foreground: 20 13% 9%;
  --primary: 19 83% 36%;
  --primary-foreground: 33 35% 94%;
  --secondary: 33 17% 87%;
  --secondary-foreground: 20 13% 9%;
  --muted: 33 17% 87%;
  --muted-foreground: 35 13% 41%;
  --accent: 33 17% 87%;
  --accent-foreground: 20 13% 9%;
  --destructive: 0 60% 34%;
  --destructive-foreground: 33 35% 94%;
  --border: 33 17% 87%;
  --input: 33 17% 87%;
  --ring: 19 83% 36%;
  --radius: 2px;
}

:root:root.dark {
  --background: 30 12% 10%;
  --foreground: 35 32% 93%;
  --card: 38 18% 12%;
  --card-foreground: 35 32% 93%;
  --popover: 38 18% 12%;
  --popover-foreground: 35 32% 93%;
  --primary: 17 79% 44%;
  --primary-foreground: 35 32% 93%;
  --secondary: 30 11% 15%;
  --secondary-foreground: 35 32% 93%;
  --muted: 30 11% 15%;
  --muted-foreground: 34 10% 53%;
  --accent: 30 11% 15%;
  --accent-foreground: 35 32% 93%;
  --destructive: 0 58% 56%;
  --destructive-foreground: 35 32% 93%;
  --border: 30 8% 16%;
  --input: 30 8% 16%;
  --ring: 17 79% 44%;
}

html body {
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

/* Wordmark, matching the app's text-only nav. !important beats the
   .font-bold utility on the same element. */
header h1 {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-weight: 400 !important;
}

/* No Cadenza logo asset exists; hide the slot that would otherwise
   fall back to the Gatus logo. */
header .w-12 {
  display: none;
}

/* Health badges and response-time bars use Tailwind green/red utilities,
   not the semantic tokens; !important beats app.css, which loads after
   this sheet. Colors are Cadenza status-matched / status-error. */
.bg-success, .bg-green-400, .bg-green-500, .bg-green-600 {
  background-color: #267040 !important;
}
.dark .bg-success, .dark .bg-green-400, .dark .bg-green-500, .dark .bg-green-600 {
  background-color: #5cb878 !important;
}
.text-green-400, .text-green-500, .text-green-600 {
  color: #267040 !important;
}
.dark .text-green-400, .dark .text-green-500, .dark .text-green-600 {
  color: #5cb878 !important;
}
.bg-red-400, .bg-red-500, .bg-red-600 {
  background-color: #8a2222 !important;
}
.dark .bg-red-400, .dark .bg-red-500, .dark .bg-red-600 {
  background-color: #d05050 !important;
}