/* Notu.la / Notula colours on top of Gatus's own (shadcn-style) HSL tokens.
   Values come from the notu.la site palette (site.css). Status colours stay
   Gatus's green/red so up and down read the same as on any status page. The
   Gatus footer stays visible (Apache-2.0 attribution).
   Gatus loads this file before its own app.css, so the token blocks use
   html:root / html.dark to win on specificity. */
html:root{
  --background:45 36% 96%;
  --foreground:250 21% 17%;
  --card:48 100% 99%;
  --card-foreground:250 21% 17%;
  --popover:48 100% 99%;
  --popover-foreground:250 21% 17%;
  --primary:252 32% 28%;
  --primary-foreground:45 36% 96%;
  --secondary:42 29% 91%;
  --secondary-foreground:250 21% 17%;
  --muted:42 29% 91%;
  --muted-foreground:253 9% 40%;
  --accent:263 47% 93%;
  --accent-foreground:252 32% 28%;
  --border:40 17% 86%;
  --input:40 17% 86%;
  --ring:254 41% 56%;
  --radius:0.75rem;
}
html.dark{
  --background:253 18% 10%;
  --foreground:267 39% 95%;
  --card:260 19% 15%;
  --card-foreground:267 39% 95%;
  --popover:260 19% 15%;
  --popover-foreground:267 39% 95%;
  --primary:259 66% 77%;
  --primary-foreground:253 18% 10%;
  --secondary:257 19% 14%;
  --secondary-foreground:267 39% 95%;
  --muted:263 19% 18%;
  --muted-foreground:263 15% 73%;
  --accent:266 22% 21%;
  --accent-foreground:259 66% 77%;
  --border:261 14% 24%;
  --input:261 14% 24%;
  --ring:259 66% 77%;
}
body{
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  letter-spacing:-.03em;
}
/* The inlined logo is the square app icon; round it as in the notu.la header. */
img[src^="data:image/png"]{border-radius:22%}
/* Gatus hard-codes an English subtitle under the header when buttons are set;
   swap it for a bilingual one. Non-ASCII stays raw UTF-8 (CSS has no \uXXXX)
   and control characters go, so the only escapes left are \" and \\. */
h1.text-2xl + p.text-sm.text-muted-foreground{font-size:0}
h1.text-2xl + p.text-sm.text-muted-foreground::after{
  content:"Notu.la / Notula";
  font-size:.875rem;
}