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

:root {
  --background: 211.2 24.1% 98.1%;
  --foreground: 210.7 29.2% 10.8%;
  --card: 0 0% 100%;
  --card-foreground: 210.7 29.2% 10.8%;
  --popover: 0 0% 100%;
  --popover-foreground: 210.7 29.2% 10.8%;
  --primary: 22.1 100% 34.3%;
  --primary-foreground: 43.9 25.9% 95.5%;
  --secondary: 211.2 10% 91%;
  --secondary-foreground: 210.7 29.2% 10.8%;
  --muted: 211.2 17.9% 97.5%;
  --muted-foreground: 211.1 5.9% 39.3%;
  --accent: 211.2 10% 91%;
  --accent-foreground: 210.7 29.2% 10.8%;
  --destructive: 359.5 63.7% 52.9%;
  --destructive-foreground: 43.9 25.9% 95.5%;
  --border: 211.2 6.9% 87.1%;
  --input: 211.1 4.4% 54.1%;
  --ring: 26.3 81.3% 57.5%;
  --radius: 10px;
}

:root.dark {
  --background: 211.8 44.3% 4.7%;
  --foreground: 43.9 25.9% 95.5%;
  --card: 210.7 33.9% 8.1%;
  --card-foreground: 43.9 25.9% 95.5%;
  --popover: 210.7 33.9% 8.1%;
  --popover-foreground: 43.9 25.9% 95.5%;
  --primary: 26.3 81.3% 57.5%;
  --primary-foreground: 210.7 29.2% 10.8%;
  --secondary: 210.8 25.5% 12.7%;
  --secondary-foreground: 43.9 25.9% 95.5%;
  --muted: 210.8 25.5% 12.7%;
  --muted-foreground: 211.1 4.1% 59.9%;
  --accent: 210.8 25.5% 12.7%;
  --accent-foreground: 43.9 25.9% 95.5%;
  --destructive: 359.5 63.7% 52.9%;
  --destructive-foreground: 43.9 25.9% 95.5%;
  --border: 211 13.6% 20.3%;
  --input: 211 8.4% 30.6%;
  --ring: 26.3 81.3% 57.5%;
}

/* Typography - IBM Plex everywhere, matching the wordmark and every
   other brand surface. Gatus ships Inter as a literal font-family
   value (not a CSS var), so text elements need a direct override. */
body, button, input, select, textarea {
  font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
}
h1, h2, h3, .font-bold, .font-semibold {
  font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif !important;
}

::selection {
  background: hsl(26.3 81.3% 57.5% / 0.25);
}

a {
  color: hsl(var(--primary));
}

/* Header - flat ink bar instead of the translucent card-tint default,
   matching the design concept's dark header over a light page body. */
header.border-b {
  background: hsl(211.8 44.3% 4.7%) !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
}
header.border-b h1 { color: hsl(43.9 25.9% 95.5%) !important; letter-spacing: 0.01em; }
header.border-b p { color: hsl(26.3 81.3% 57.5% / 0.85) !important; }
header.border-b .text-muted-foreground { color: hsl(43.9 25.9% 95.5% / 0.6) !important; }
header.border-b nav a { color: hsl(43.9 25.9% 95.5% / 0.85) !important; }
header.border-b nav a:hover,
header.border-b button:hover {
  background: hsl(43.9 25.9% 95.5% / 0.08) !important;
  color: hsl(43.9 25.9% 95.5%) !important;
}

/* Footer - quiet and hairline-bordered, matching every other Murmur
   Web Studio footer. The "Powered by Gatus" credit stays as a courtesy
   (Apache 2.0 has no on-screen attribution requirement, and Gatus
   ships no NOTICE file, but it's still a small, unintrusive nod to
   the project this page runs on) and picks up the accent color. */
footer a[href="https://gatus.io"],
footer .text-emerald-800 {
  color: hsl(var(--primary)) !important;
}

/* The GitHub badge is a `position: fixed` element (#social) pinned to
   the viewport's bottom-right corner regardless of where it sits in
   the DOM - on a page shorter than the viewport it visually floats
   disconnected from the real footer above it, rather than reading as
   part of it. Hiding it leaves the in-flow "Powered by Gatus" credit
   above as the only, properly footer-anchored credit. */
#social {
  display: none !important;
}

/* The bottom-left refresh-interval/theme pill (#settings) is a user
   control this status page doesn't want exposed - hidden rather than
   removed from the Vue source, consistent with every other change in
   this file being config/CSS-only, not a fork of Gatus itself. */
#settings {
  display: none !important;
}

/* Cards - hairline border, no resting shadow, no hover scale/pop.
   The brand treats motion as calm throughout (no bounce, no scale);
   a subtle ring-colored border on hover replaces the stock
   shadow+scale combo. */
.endpoint, .rounded-lg.border.bg-card, .shadow-sm {
  box-shadow: none !important;
}
.endpoint:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: hsl(var(--ring)) !important;
}

/* Status colors - Gatus hardcodes these as literal Tailwind
   green/red/yellow/gray utility classes per-component (StatusBadge,
   EndpointCard/SuiteCard result bars, AnnouncementBanner, Tooltip,
   FlowStep, the group unhealthy-count pill), not CSS vars, so they
   need direct overrides. Unscoped on purpose: the same classes are
   reused verbatim across all of those components, so one table
   covers every one of them. Success -> brand --state-success family,
   danger -> --state-danger family, degraded/warning -> the brand's
   one accent hue (amber) rather than introducing a new color,
   unknown/neutral -> the graphite neutral ramp.
   success */
.bg-green-50 { background-color: #e4f8e7 !important; }
.bg-green-100 { background-color: #c3eac9 !important; }
.bg-green-400 { background-color: #79c289 !important; }
.bg-green-500,
.bg-green-600 { background-color: #3b9555 !important; }
.bg-green-700,
.hover\:bg-green-700:hover { background-color: #067132 !important; }
.dark .dark\:bg-green-600,
:root.dark .dark\:bg-green-600 { background-color: #3b9555 !important; }
.dark .dark\:bg-green-900\/20, .dark .dark\:bg-green-900\/30, .dark .dark\:bg-green-900\/50,
:root.dark .dark\:bg-green-900\/20, :root.dark .dark\:bg-green-900\/30, :root.dark .dark\:bg-green-900\/50 {
  background-color: hsl(137 43% 41% / 0.16) !important;
}
.border-green-200 { border-color: #c3eac9 !important; }
.border-green-500 { border-color: #3b9555 !important; }
.dark .dark\:border-green-400, :root.dark .dark\:border-green-400 { border-color: #79c289 !important; }
.dark .dark\:border-green-700, :root.dark .dark\:border-green-700 { border-color: #3b9555 !important; }
.text-green-500,
.text-green-600 { color: #067132 !important; }
.text-green-700,
.text-green-800 { color: #005820 !important; }
.dark .dark\:text-green-200, :root.dark .dark\:text-green-200,
.dark .dark\:text-green-300, :root.dark .dark\:text-green-300,
.dark .dark\:text-green-400, :root.dark .dark\:text-green-400 { color: #79c289 !important; }

/* danger */
.bg-red-50 { background-color: #ffedeb !important; }
.bg-red-100 { background-color: #ffd8d4 !important; }
.bg-red-400 { background-color: #ef6661 !important; }
.bg-red-500,
.bg-red-600 { background-color: #d33a3c !important; }
.bg-red-700,
.hover\:bg-red-700:hover { background-color: #b71824 !important; }
.dark .dark\:bg-red-900, :root.dark .dark\:bg-red-900,
.dark .dark\:bg-red-900\/20, :root.dark .dark\:bg-red-900\/20,
.dark .dark\:bg-red-900\/30, :root.dark .dark\:bg-red-900\/30,
.dark .dark\:bg-red-900\/50, :root.dark .dark\:bg-red-900\/50,
.dark .dark\:bg-red-950, :root.dark .dark\:bg-red-950 {
  background-color: hsl(359.5 64% 53% / 0.16) !important;
}
.border-red-200 { border-color: #ffd8d4 !important; }
.border-red-600 { border-color: #d33a3c !important; }
.dark .dark\:border-red-700, :root.dark .dark\:border-red-700 { border-color: #d33a3c !important; }
.dark .dark\:text-red-200, :root.dark .dark\:text-red-200,
.dark .dark\:text-red-300, :root.dark .dark\:text-red-300,
.dark .dark\:text-red-400, :root.dark .dark\:text-red-400 { color: #ef6661 !important; }
.text-red-500,
.text-red-600 { color: #b71824 !important; }
.text-red-700,
.text-red-800 { color: #9e0016 !important; }

/* degraded / warning - reuses the brand's one accent hue (amber) */
.bg-yellow-50 { background-color: #ffede0 !important; }
.bg-yellow-400 { background-color: #ffbe8a !important; }
.bg-yellow-500 { background-color: #eb883b !important; }
.dark .dark\:bg-yellow-900\/20, :root.dark .dark\:bg-yellow-900\/20,
.dark .dark\:bg-yellow-900\/50, :root.dark .dark\:bg-yellow-900\/50 {
  background-color: hsl(26.3 81% 58% / 0.16) !important;
}
.text-yellow-500 { color: #af4000 !important; }

/* unknown / neutral */
.bg-gray-50 { background-color: #f4f5f7 !important; }
.bg-gray-200 { background-color: #cbced2 !important; }
.bg-gray-300 { background-color: #b4b8bc !important; }
.bg-gray-400 { background-color: #95999d !important; }
.bg-white { background-color: #ffffff !important; }
.dark .dark\:bg-gray-600, :root.dark .dark\:bg-gray-600 { background-color: #474e55 !important; }
.dark .dark\:bg-gray-700, :root.dark .dark\:bg-gray-700 { background-color: #2d343b !important; }
.dark .dark\:bg-gray-800, :root.dark .dark\:bg-gray-800,
.dark .dark\:bg-gray-800\/20, :root.dark .dark\:bg-gray-800\/20,
.dark .dark\:bg-gray-800\/50, :root.dark .dark\:bg-gray-800\/50 { background-color: #151b22 !important; }
.border-gray-200,
.border-gray-300 { border-color: #cbced2 !important; }
.dark .dark\:border-gray-600, :root.dark .dark\:border-gray-600,
.dark .dark\:border-gray-700, :root.dark .dark\:border-gray-700 { border-color: #2d343b !important; }
.text-gray-500 { color: #5e646a !important; }
.dark .dark\:text-gray-400, :root.dark .dark\:text-gray-400 { color: #95999d !important; }

/* misc single-use accents - keep the page to one accent hue (amber)
   rather than the stock emerald credit link or blue selection ring */
.ring-blue-200 { --tw-ring-color: rgb(235 136 59 / 0.35) !important; }
.dark .dark\:ring-blue-800, :root.dark .dark\:ring-blue-800 { --tw-ring-color: rgb(235 136 59 / 0.45) !important; }
.bg-red-600 { background-color: #d33a3c !important; }