/* Social Pay — custom Upptime theme.
   Brand: magenta #B71469 → orange #F0812B, ink #1A1A1A, warm bg #FFF8F3.
   NOTE: Upptime loads global.css AFTER themeUrl, and global.css redefines the
   :root variables — so this sheet must win the cascade: :root:root doubles
   specificity for the variables; !important guards the structural overrides. */

:root:root {
  --body-background-color: #FFF8F3;
  --body-text-color: #1A1A1A;
  --card-background-color: #ffffff;
  --nav-background-color: #ffffff;
  --nav-border-bottom-color: rgba(26, 26, 26, 0.08);
  --nav-current-border-bottom-color: #B71469;
  --card-border-color: rgba(26, 26, 26, 0.08);
  --down-border-left-color: #E11D48;
  --down-background-color: #FFF1F2;
  --degraded-border-left-color: #F0812B;
  --up-border-left-color: #10B981;
  --tag-color: #ffffff;
  --tag-up-background-color: #10B981;
  --tag-down-background-color: #E11D48;
  --tag-degraded-background-color: #F0812B;
  --change-background-color: #F0812B;
  --error-button-border-color: #8E0F52;
  --error-button-background-color: #B71469;
  --error-button-color: #ffffff;
  --submit-button-border-color: #8E0F52;
  --submit-button-background-color: #B71469;
  --submit-button-color: #ffffff;
  --graph-opacity: 1;
  --graph-filter: hue-rotate(120deg) saturate(1.4);
}

/* ---- Typography ---- */
html body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
h1, h2, h3 { letter-spacing: -0.02em !important; font-weight: 800 !important; }

/* ---- Nav: white bar with a brand-gradient top stripe ---- */
html nav {
  border-top: 4px solid !important;
  border-image: linear-gradient(90deg, #B71469, #F0812B) 1 !important;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.04);
}
nav img { height: 30px !important; width: auto !important; }

/* ---- Intro: gradient brand name ---- */
.lead strong, h1 strong {
  background: linear-gradient(90deg, #B71469, #F0812B);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #B71469; /* fallback */
}

/* ---- Cards: rounded, soft elevation ---- */
article, .link {
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.05) !important;
}

/* Live-status range tabs (24h / 7d / 30d / 1y / all) */
.live-status a, .live-status button { color: #B71469 !important; }

/* ---- Links & buttons ---- */
main a { color: #B71469; }
main a:hover { color: #8E0F52; }
button { border-radius: 999px !important; }

/* ---- Footer: quiet ---- */
footer { opacity: 0.75; font-size: 0.9em; }