@font-face {
  font-family: "Geist";
  src: url("/__down/geist-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/__down/geist-latin-800-normal.woff2") format("woff2");
  font-weight: 500 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/__down/geist-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* catppuccin macchiato on #151515, mauve is the brand color. */
html:root,
html:root.dark {
  --background: 0 0% 8.2%;
  --foreground: 227 68% 88%;
  --card: 0 0% 10.6%;
  --card-foreground: 227 68% 88%;
  --popover: 0 0% 10.6%;
  --popover-foreground: 227 68% 88%;
  --primary: 267 83% 80%;
  --primary-foreground: 0 0% 8.2%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 227 68% 88%;
  --muted: 0 0% 14%;
  --muted-foreground: 227 27% 72%;
  --accent: 267 20% 17%;
  --accent-foreground: 267 83% 80%;
  --destructive: 351 74% 73%;
  --destructive-foreground: 0 0% 8.2%;
  --border: 0 0% 18%;
  --input: 267 83% 80%;
  --ring: 267 83% 80%;
  --radius: 0px;
  --mauve: #c6a0f6;
  --red: #ed8796;
  --green: #a6da95;
  --yellow: #eed49f;
  --blue: #8aadf4;
  color-scheme: dark;
}

html,
body {
  background: #151515;
  font-family: "Geist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-mono,
code,
pre {
  font-family: "Geist Mono", ui-monospace, monospace;
}

::selection {
  color: #151515;
  background: var(--mauve);
}

.rounded-full,
.rounded-lg,
.rounded-md,
.rounded-sm,
.rounded {
  border-radius: 0 !important;
}

/* brand accents. */
.dashboard-container h1 + p,
.dashboard-container h1 + div.text-muted-foreground {
  color: var(--mauve);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 14px;
}

.dashboard-container .mb-6 > button:first-child {
  color: var(--mauve);
}

.endpoint:hover {
  border-color: var(--mauve) !important;
}

button.border-input {
  color: var(--mauve);
}

a {
  color: var(--mauve);
}

/* status colors. */
.bg-green-400,
.bg-green-500 {
  background-color: var(--green) !important;
}
.bg-green-700,
.hover\:bg-green-700:hover {
  background-color: #86b876 !important;
}
.bg-red-400,
.bg-red-500 {
  background-color: var(--red) !important;
}
.bg-red-700,
.hover\:bg-red-700:hover {
  background-color: #c96474 !important;
}
.bg-green-500.text-white {
  color: #151515;
}
.text-green-500 {
  color: var(--green) !important;
}
.text-red-500 {
  color: var(--red) !important;
}
.bg-green-500 > .bg-green-400,
.bg-destructive > .bg-red-400 {
  background-color: rgb(21 21 21 / 0.55) !important;
}
.dark .dark\:bg-gray-700 {
  background-color: #262626 !important;
}

/* announcements. */
.announcement-header:hover {
  background-color: hsl(var(--accent)) !important;
}
.announcement-container .dark\:border-gray-600,
.announcement-content .border-t {
  border-color: hsl(var(--border)) !important;
}
.announcement-container .dark\:text-gray-100 {
  color: hsl(var(--foreground)) !important;
}
.announcement-container .dark\:text-gray-400,
.announcement-container .dark\:text-gray-300 {
  color: hsl(var(--muted-foreground)) !important;
}
.announcement-content .w-0\.5 {
  background-color: hsl(var(--border)) !important;
}
.announcement-content .dark\:bg-gray-800 {
  background-color: hsl(var(--card)) !important;
}
.announcement-content .z-10.px-2 {
  background-color: hsl(var(--card)) !important;
  border-color: var(--mauve) !important;
}
.announcement-content .z-10.px-2 time {
  color: var(--mauve) !important;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-weight: 400;
}
.announcement-content .rounded-md.border.p-3 {
  border-color: rgb(var(--tone) / 0.35) !important;
  background-color: rgb(var(--tone) / 0.08) !important;
}
.announcement-content .rounded-md.border.p-3 p {
  color: hsl(var(--foreground)) !important;
}
.announcement-content .rounded-md.border.p-3 a {
  color: var(--mauve);
}
.announcement-container {
  --tone: 198 160 246;
}
.announcement-container:has(.border-l-red-500),
.announcement-content .relative:has(> .border-red-500) {
  --tone: 237 135 150;
}
.announcement-container:has(.border-l-yellow-500),
.announcement-content .relative:has(> .border-yellow-500) {
  --tone: 238 212 159;
}
.announcement-container:has(.border-l-blue-500),
.announcement-content .relative:has(> .border-blue-500) {
  --tone: 138 173 244;
}
.announcement-container:has(.border-l-green-500),
.announcement-content .relative:has(> .border-green-500) {
  --tone: 166 218 149;
}
.border-l-red-500,
.border-l-yellow-500,
.border-l-blue-500,
.border-l-green-500,
.border-l-gray-500 {
  border-left-color: rgb(var(--tone)) !important;
}
.announcement-content .border-red-500,
.announcement-content .border-yellow-500,
.announcement-content .border-blue-500,
.announcement-content .border-green-500,
.announcement-content .border-gray-500 {
  border-color: rgb(var(--tone)) !important;
}
.announcement-container [class*="dark:text-red-"],
.announcement-container [class*="dark:text-yellow-"],
.announcement-container [class*="dark:text-blue-"],
.announcement-container [class*="dark:text-green-"] {
  color: rgb(var(--tone)) !important;
}

/* hidden parts: chrome, search, theme toggle and every response time display. */
#global header,
#global footer,
.dashboard-container .mb-6 > div:has(input),
.dashboard-container button[title$="response time"],
.endpoint-content div:has(> p[title$="response time"]),
#settings button[aria-label$="mode"],
#settings .w-px,
#tooltip > .space-y-2 > div:nth-child(2),
.space-y-6 > .grid.gap-6.lg\:grid-cols-4 > :nth-child(2),
.space-y-6 > .grid.gap-6.lg\:grid-cols-4 > :nth-child(3),
div.space-y-6:has(> .grid img[alt$="response time"]),
.bg-card:has(img[alt="health badge"]) {
  display: none !important;
}

@media (min-width: 768px) {
  .space-y-6 > .grid.gap-6.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}