/* Markbase branding for status.markbase.cloud, matching markbase.cloud
   (~/work/markbase.cloud: src/styles/global.css tokens,
   src/components/site/TopNav.astro + SiteNavigation.tsx,
   src/components/site/CtaFooter.astro). The site is light-only, so the status
   page pins light via pageConfig.colorScheme. Hooks (status-*) live in
   components/Header.tsx and components/Footer.tsx. */

/* Geist (SIL OFL), the variable latin file markbase.cloud self-hosts via
   fontsource. */
@font-face {
  font-family: 'Geist Variable';
  src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --mb-canvas: #fbfaf9;
  --mb-surface: #ffffff;
  --mb-raised: #f1efed;
  --mb-stroke: #e0dcd9;
  --mb-muted: #5f5956;
  --mb-secondary: #3d3836;
  --mb-ink: #141414;
  --mb-ink-strong: #000000;
  --mb-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* The site has no rounded corners anywhere; collapse Mantine's radii too. */
:root[data-mantine-color-scheme='light'] {
  --mantine-font-family: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
  --mantine-font-family-headings: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
  --mantine-color-body: var(--mb-canvas);
  --mantine-color-text: var(--mb-ink);
  --mantine-color-anchor: var(--mb-ink);
  --mantine-color-default-border: var(--mb-stroke);
  --mantine-primary-color-filled: var(--mb-ink-strong);
  --mantine-primary-color-filled-hover: var(--mb-secondary);
  --mantine-radius-default: 0;
  --mantine-radius-xs: 0;
  --mantine-radius-sm: 0;
  --mantine-radius-md: 0;
  --mantine-radius-lg: 0;
  --mantine-radius-xl: 0;
}

html body {
  background-color: var(--mb-canvas);
  color: var(--mb-ink);
}

/* pages/*.tsx put next/font Inter on <main>; the site face wins. */
main {
  font-family: var(--mantine-font-family) !important;
}

/* Headings earn weight through tightness, not boldness (site: 400/500). */
main h1,
main h2,
main h3 {
  font-weight: 500;
  letter-spacing: -0.02em;
}

::selection {
  background-color: var(--mb-ink);
  color: var(--mb-canvas);
}

/* Header: sticky, 64px, flat canvas, no shadow (markbase.cloud h-16). */
.status-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  /* !important: Header.module.css sets the body colour and loads later. */
  background-color: var(--mb-canvas) !important;
  border-bottom: 1px solid var(--mb-stroke) !important;
}
.status-header-inner {
  height: 64px;
}
/* Logo at the site's 20px height (h-5). */
.status-logo {
  height: 20px !important;
  width: auto !important;
}
/* Nav links: uppercase body-sm in the secondary tone. */
.status-header-link {
  color: var(--mb-secondary);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  border-radius: 0;
  transition: color 0.15s var(--mb-ease), background-color 0.15s var(--mb-ease);
}
.status-header-link:hover {
  color: var(--mb-ink);
  background-color: transparent;
}
/* The highlighted link renders as the site's "Start free" button:
   a square, neutral fill one step off the canvas. */
[data-mantine-color-scheme] .status-header-link[data-active] {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  margin-left: 8px;
  border-radius: 0;
  text-transform: none;
  /* !important: Header.module.css's blue pill has equal specificity and loads later. */
  background-color: var(--mb-raised) !important;
  color: var(--mb-ink) !important;
}
[data-mantine-color-scheme] .status-header-link[data-active]:hover {
  background-color: var(--mb-stroke) !important;
  color: var(--mb-ink-strong) !important;
}

/* Footer: the site's bottom row (logo left, legal right). */
.status-footer-divider {
  border-color: var(--mb-stroke) !important;
}
.status-footer .mb-footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  line-height: 1.43;
  color: var(--mb-muted);
}
.status-footer .mb-footer img {
  height: 20px;
  width: auto;
  display: block;
}
.status-footer .mb-footer-legal {
  text-align: center;
}
.status-footer .mb-footer-legal p {
  margin: 0;
}
.status-footer .mb-footer-legal p + p {
  margin-top: 6px;
}
.status-footer .mb-footer a {
  color: var(--mb-ink);
  text-decoration: underline;
  text-decoration-color: var(--mb-stroke);
  text-underline-offset: 4px;
}
.status-footer .mb-footer a:hover {
  text-decoration-color: var(--mb-ink);
}
.status-footer .mb-footer .mb-sep {
  margin: 0 8px;
  color: var(--mb-stroke);
}
@media (min-width: 768px) {
  .status-footer .mb-footer {
    flex-direction: row;
  }
  .status-footer .mb-footer-legal {
    text-align: right;
  }
}