/* =============================================================
   mightora.io — LIGHT theme for Upptime status page
   Matches https://mightora.io light mode exactly:
     • Background:  #ffffff  (Hextra bg-white)
     • Text:        #111827  (Tailwind gray-900)
     • Primary:     hsl(100,90%,50%) = #59f20d as accent
     • Links:       #1d4ed8  (Tailwind blue-700 — clear, accessible)
     • Font:        Quicksand (same as mightora.io custom.css)
  ============================================================= */

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --body-background-color: #ffffff;       /* Hextra light bg-white            */
  --body-text-color: #111827;             /* Tailwind gray-900                */
  --card-background-color: #ffffff;       /* white cards on white body        */

  /* ── Navigation ──────────────────────────────────────────── */
  --nav-background-color: #ffffff;        /* white nav, matches mightora.io   */
  --nav-border-bottom-color: #e5e7eb;     /* Tailwind gray-200 separator      */
  --nav-current-border-bottom-color: #59f20d; /* bright lime-green accent     */

  /* ── Cards ───────────────────────────────────────────────── */
  --card-border-color: #e5e7eb;           /* Tailwind gray-200                */

  /* ── Status colours ──────────────────────────────────────── */
  --down-border-left-color: #ef4444;      /* Tailwind red-500                 */
  --down-background-color: #fef2f2;       /* Tailwind red-50                  */
  --degraded-border-left-color: #f59e0b;  /* Tailwind amber-400               */
  --up-border-left-color: #59f20d;        /* primary-500 lime-green           */

  /* ── Status tags ─────────────────────────────────────────── */
  --tag-color: #111827;                   /* dark text on all tag backgrounds */
  --tag-up-background-color: #59f20d;     /* bright lime-green                */
  --tag-down-background-color: #fca5a5;   /* Tailwind red-300, readable       */
  --tag-degraded-background-color: #fcd34d; /* Tailwind amber-300             */

  /* ── Highlights ──────────────────────────────────────────── */
  --change-background-color: #fef9c3;     /* Tailwind yellow-100              */

  /* ── Buttons ─────────────────────────────────────────────── */
  --error-button-border-color: #1e40af;   /* Tailwind blue-800                */
  --error-button-background-color: #1d4ed8; /* Tailwind blue-700              */
  --error-button-color: #ffffff;
  --submit-button-border-color: #1e40af;
  --submit-button-background-color: #1d4ed8;
  --submit-button-color: #ffffff;

  /* ── Graphs ─────────────────────────────────────────────── */
  --graph-opacity: 1;
  --graph-filter: none;
}

/* ── Typography ──────────────────────────────────────────────
   Quicksand is used by mightora.io via its custom.css         */
body, button, input, select, textarea {
  font-family:
    'Quicksand', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif !important;
}

/* ── Links ───────────────────────────────────────────────────
   Standard accessible blue — readable on white, no green     */
a {
  color: #1d4ed8 !important;             /* Tailwind blue-700                */
}

a:hover {
  color: #1e40af !important;             /* Tailwind blue-800 — slightly darker */
  text-decoration: underline;
}

/* ── Nav: bold site name, matching mightora.io branding ───── */
nav .logo-name,
nav .logo h1,
nav h1 {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* ── Nav: subtle gray divider between links ─────────────────── */
nav ul li + li {
  border-left: 1px solid #e5e7eb;
}

/* ── Cards: soften corners like mightora.io's card components */
.status-card,
[class*="card"] {
  border-radius: 6px !important;
}

/* ── Ensure the logo SVG is visible on a white nav ─────────── */
nav img[alt*="logo"],
nav .logo img {
  filter: none;
}