/* ==========================================================================
   Manifold Security — status page theme
   Mirrors the platform web app design system: Inter (body), Mozilla Text
   (headings), Fira Code (mono), neutral palette + brand red (#d60036).
   Loaded after cState's base styles, so equal-specificity rules win on order.
   ========================================================================== */

@font-face {
  font-family: "Mozilla Text";
  src: url("/fonts/mozilla-text-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --mf-bg:             #fafafa; /* neutral-50  */
  --mf-surface:        #ffffff;
  --mf-surface-alt:    #f5f5f5; /* neutral-100 */
  --mf-surface-hover:  #ededed;
  --mf-text:           #262626; /* neutral-900 */
  --mf-text-secondary: #595959; /* neutral-700 */
  --mf-text-muted:     #858585; /* neutral-600 */
  --mf-border:         #d6d6d6; /* neutral-300 */
  --mf-border-strong:  #b3b3b3; /* neutral-400 */
  --mf-brand:          #d60036; /* brand-primary */
  --mf-radius:         8px;     /* border-radius-m  */
  --mf-radius-sm:      6px;     /* border-radius-s  */
}

/* ---------- Base ---------- */
html, body {
  background: var(--mf-bg);
  color: var(--mf-text-secondary);
  font-family: "Inter Variable", "Inter", system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: #f8b9c8; } /* brand-tinted */

a { color: var(--mf-text); }
a:hover { color: var(--mf-brand); opacity: 1; }

code, pre, kbd, samp {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}

hr { border-bottom: 1px solid var(--mf-border); }

/* ---------- Headings ---------- */
h1, h2, h3, h4,
.header a h1 {
  font-family: "Mozilla Text", "Inter", system-ui, sans-serif;
  color: var(--mf-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Header ---------- */
.header {
  background: var(--mf-surface);
  border-bottom: 1px solid var(--mf-border);
  padding: 16px 0;
}
.header a { color: var(--mf-text-secondary); font-variant: normal; }
.header__logo img { width: 220px; }
.header__logo--small img { width: 140px; }

/* ---------- Footer ---------- */
.footer {
  background: transparent;
  border-top: 1px solid var(--mf-border);
  color: var(--mf-text-muted);
}
.footer__copyright { font-variant: normal; }

/* ---------- Tabs ---------- */
.tabs { border-bottom: 1px solid var(--mf-border); }
.tab--current {
  border: 1px solid var(--mf-border);
  border-bottom-color: var(--mf-bg);
  border-radius: var(--mf-radius-sm) var(--mf-radius-sm) 0 0;
  color: var(--mf-text);
  font-weight: 500;
}
.tab--other { color: var(--mf-text-muted); }
.tab--other:hover { color: var(--mf-text); }

/* ---------- Components & categories ---------- */
.components {
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  overflow: hidden;
}
.component {
  color: var(--mf-text);
  border-bottom: 1px solid var(--mf-border);
}
.component:last-child { border-bottom: 0; }

/* ---------- Issues ---------- */
.issue { border-radius: var(--mf-radius-sm); }
.issue:hover, .category__head:hover { background: var(--mf-surface-alt); }
.issue:active, .category__head:active { background: var(--mf-surface-hover); }

/* ---------- Tags & archive ---------- */
.tag {
  background: var(--mf-surface-alt);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-sm);
  color: var(--mf-text-secondary);
}
.tag:hover { background: var(--mf-surface-hover); }
.tag:active { background: var(--mf-border); }
.archive__head {
  background: var(--mf-surface-alt);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
}

/* ---------- Status summary banner ---------- */
.status-ok .summary,
.status-disrupted .summary,
.status-down .summary,
.status-notice .summary {
  border-radius: var(--mf-radius);
}

/* ---------- Announcement / incident boxes ---------- */
.announcement-box { border-radius: var(--mf-radius); }