/* customdomain.ai brand theme for the Gatus status page.
 *
 * Served by Caddy at /css/custom.css — the path Gatus's SPA already requests.
 * It lives in this file rather than inline in gatus/config.yaml's `ui.custom-css`
 * as a deliberate choice, NOT because that key is missing: it exists and works
 * in v5.36.0. The reasons (it takes CSS text not a path, it sets no
 * Cache-Control, and os.ExpandEnv eats `$`) are written out in config.yaml.
 * Serving it from the reverse proxy also means a Gatus upgrade cannot drop the
 * theme.
 *
 * Reaching visitors requires the caddy container to actually have the
 * ./gatus:/srv/gatus:ro mount — see the note in infra/Caddyfile.
 *
 * Palette taken from the live site, not invented: ink #1c1917, warm paper
 * #faf9f7, stone hairlines #e7e5e4, muted #78716c, and Inter as the UI face.
 */

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

:root {
  --cd-ink: #1c1917;
  --cd-paper: #faf9f7;
  --cd-surface: #ffffff;
  --cd-line: #e7e5e4;
  --cd-muted: #78716c;
}

html, body, #app {
  background: var(--cd-paper) !important;
  color: var(--cd-ink) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Panels: warm surface, hairline stone border, and a shadow light enough that
   the page reads as paper rather than as floating cards. */
.bg-white,
.bg-gray-50,
.bg-gray-100 {
  background: var(--cd-surface) !important;
  border-color: var(--cd-line) !important;
}
.border,
.border-gray-200,
.border-gray-300 {
  border-color: var(--cd-line) !important;
}
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl {
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05) !important;
}
.rounded, .rounded-md, .rounded-lg { border-radius: 10px !important; }

/* Type — the site sets display headings tight; match it. */
h1, h2, h3,
.text-xl, .text-2xl, .text-3xl, .text-4xl {
  color: var(--cd-ink) !important;
  letter-spacing: -0.021em;
  font-weight: 700;
}
.text-gray-400, .text-gray-500, .text-gray-600 { color: var(--cd-muted) !important; }

/* The brand mark. Gatus renders the configured logo small by default; this
   sizes it to read as a logo and keeps the squircle from the source asset. */
img[src*="favicon"],
header img,
nav img {
  height: 36px !important;
  width: auto !important;
  border-radius: 9px;
}

/* Status colours stay semantic — this is the one place where brand harmony
   must not win over legibility. */
.bg-success, .bg-green-500, .bg-green-600 { background-color: #10b981 !important; }
.bg-danger,  .bg-red-500,   .bg-red-600   { background-color: #ef4444 !important; }
.bg-warning, .bg-yellow-500, .bg-amber-500 { background-color: #f59e0b !important; }

a { color: var(--cd-ink); text-underline-offset: 2px; }
a:hover { opacity: 0.72; }

/* Dark mode follows the OS, using the same ramp inverted. */
@media (prefers-color-scheme: dark) {
  :root {
    --cd-ink: #fafaf9;
    --cd-paper: #1c1917;
    --cd-surface: #292524;
    --cd-line: #292524;
    --cd-muted: #a8a29e;
  }
  html, body, #app {
    background: var(--cd-paper) !important;
    color: var(--cd-ink) !important;
  }
  .bg-white, .bg-gray-50, .bg-gray-100,
  .dark\:bg-gray-800, .dark\:bg-gray-900 {
    background: var(--cd-surface) !important;
    border-color: #3f3a36 !important;
  }
  .border, .border-gray-200, .border-gray-300,
  .dark\:border-gray-700 { border-color: #3f3a36 !important; }
  .shadow, .shadow-sm, .shadow-md, .shadow-lg {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }
}

/* Remove "Powered by Gatus" from the footer without removing the footer, which
 * also carries the settings/refresh controls. Targets only the div that holds
 * the gatus.io link, so an upstream footer change cannot silently blank the
 * whole thing. :has() is the reason this can be surgical rather than a blunt
 * `footer { display:none }`.
 */
footer div:has(> a[href^="https://gatus.io"]),
footer div:has(> a[href^="http://gatus.io"]) {
  display: none !important;
}
/* Belt and braces for engines without :has() — hide the link itself, which at
 * worst leaves the word "Powered by" rather than a live competitor backlink. */
footer a[href^="https://gatus.io"] { display: none !important; }