html:root {                         /* light, derived */
  --background: 257 47% 97%;
  --foreground: 243 37% 12%;        /* night */
  --card: 0 0% 100%;
  --card-foreground: 243 37% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 243 37% 12%;
  --primary: 243 37% 12%;
  --primary-foreground: 41 100% 74%;
  --secondary: 257 35% 92%;
  --secondary-foreground: 243 37% 12%;
  --muted: 257 35% 92%;
  --muted-foreground: 246 23% 40%;
  --accent: 257 35% 92%;
  --accent-foreground: 243 37% 12%;
  --border: 252 37% 80%;
  --input: 248 24% 50%;
  --ring: 42 49% 40%;
  --destructive: 0 51% 37%;
  --destructive-foreground: 0 0% 100%;
  --botel-head: 243 37% 12%;
  --botel-up: #b8933f;              /* amber-dark: amber is too pale on paper */
  --botel-down: #a63d3d;
  --botel-on-up: #141329;
  --botel-on-down: #fff;
  --botel-empty: #d9d3ec;
}
html:root.dark {                    /* botel.dev tokens */
  --background: 243 37% 12%;        /* --night */
  --foreground: 250 30% 77%;        /* --text */
  --card: 244 34% 23%;              /* --panel */
  --card-foreground: 250 30% 77%;
  --popover: 244 34% 23%;
  --popover-foreground: 250 30% 77%;
  --primary: 41 100% 74%;           /* --amber */
  --primary-foreground: 243 37% 12%;
  --secondary: 244 34% 23%;
  --secondary-foreground: 250 30% 77%;
  --muted: 244 34% 23%;
  --muted-foreground: 249 27% 66%;  /* --muted */
  --accent: 244 34% 28%;
  --accent-foreground: 41 100% 74%;
  --border: 244 34% 33%;            /* --border */
  --input: 248 24% 57%;             /* --control-border #7f78ad */
  --ring: 41 100% 74%;
  --destructive: 0 65% 65%;
  --destructive-foreground: 243 37% 12%;
  --botel-head: 41 100% 74%;
  --botel-up: #ffd479;              /* --amber */
  --botel-down: #e06c6c;            /* darker than amber, so up and down
                                       differ in lightness, not only hue */
  --botel-on-up: #141329;
  --botel-on-down: #141329;
  --botel-empty: #3b3770;           /* --border */
}
html body { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/* Square everything: cards, group boxes, badges, bars, inputs, the
   settings pill. */
html [class*="rounded"] { border-radius: 0; }
html .border { border-width: 2px; }
html .border-b { border-bottom-width: 2px; }
html .border-t { border-top-width: 2px; }
html a.text-emerald-800 { color: hsl(var(--botel-head)); }   /* footer link */
/* Page title and group names: botel.dev's amber uppercase kicker. */
html h1, html .endpoint-group-header h2 {
  color: hsl(var(--botel-head));
  text-transform: uppercase;
  letter-spacing: .12em;
}
html h1 { font-size: 1.5rem; }
/* Flat nesting: a group is a header rule over plain space; the endpoint
   cards are the only boxes. */
html .endpoint-group { border: 0; }
html .endpoint-group-header { background: transparent; padding: 0 0 12px; }
html .endpoint-group-header h2 { font-size: .9rem; }
html .endpoint-group-content { padding: 16px 0 0; }
/* Cards: flat panel, 2px border, no shadow, no zoom; amber edge on hover. */
html .endpoint { box-shadow: none; transform: none; }
html .endpoint:hover, html.dark .endpoint.endpoint:hover { box-shadow: none; transform: none; border-color: hsl(var(--primary)); }
html .shadow-sm, html .shadow-md, html .shadow-lg { box-shadow: none; }
/* The status colours are fixed Tailwind classes. Up is amber, down is
   red; badges and the group's count carry night text, never white. */
html .bg-green-500, html .bg-green-400, html .bg-green-700,
html .hover\:bg-green-700:hover { background-color: var(--botel-up); }
html .bg-red-500, html .bg-red-600, html .bg-red-400, html .bg-red-700,
html .hover\:bg-red-700:hover { background-color: var(--botel-down); }
html .bg-green-700, html .bg-red-700,
html .hover\:bg-green-700:hover, html .hover\:bg-red-700:hover { filter: brightness(.8); }
html .bg-gray-200, html .dark\:bg-gray-700:is(.dark *) { background-color: var(--botel-empty); }
html .text-green-600 { color: hsl(var(--botel-head)); }
/* Details page event icons: Gatus's fixed green and red text classes. */
html .text-green-500 { color: var(--botel-up); }
html .text-red-500 { color: var(--botel-down); }
html .text-white:is(.bg-green-500, .bg-red-600) { color: var(--botel-on-down); }
html .text-white.bg-green-500 { color: var(--botel-on-up); }
html .bg-green-500 > .bg-green-400, html .bg-destructive > .bg-red-400 { background-color: currentColor; }
html [class*="uppercase"], html .endpoint-group-header h2 { font-weight: 700; }
/* Controls: botel.dev's field is a dark fill with a 2px light edge. */
html input, html button:not(.endpoint *) { font-family: inherit; }
html input { background: hsl(var(--background)); border-width: 2px; }
html #settings > div { box-shadow: 3px 3px 0 var(--botel-empty); }