/*
 * osg-theme.css — remaps Mantine's CSS custom properties to the
 * openshopgraph.org design tokens (see openshopgraph-frontend-v2
 * src/styles/site-tokens.css, "source of truth"). Scoped to the
 * [data-mantine-color-scheme] attribute Mantine already sets, so this
 * keeps following prefers-color-scheme via ColorSchemeScript
 * defaultColorScheme="auto" — same behaviour as the main site.
 *
 * Semantic monitor-state colors (operational green / down red used by
 * Mantine's own IconCircleCheck/IconAlertCircle + accordion chevrons) are
 * left untouched on purpose — only chrome (surfaces, borders, text,
 * type, radius) is re-themed.
 */

:root {
  --font-display:
    'Cabinet Grotesk', 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
    Arial, sans-serif;
  --font-body:
    'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-facts: 'Martian Mono', 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

  --mantine-font-family: var(--font-body);
  --mantine-font-family-headings: var(--font-display);
  --mantine-font-family-monospace: var(--font-facts);

  --mantine-radius-xs: 4px;
  --mantine-radius-sm: 8px;
  --mantine-radius-md: 12px;
  --mantine-radius-lg: 16px;
}

:root[data-mantine-color-scheme='light'] {
  --mantine-color-body: #f7f6f3; /* --paper */
  --mantine-color-text: #141412; /* --ink */
  --mantine-color-white: #ffffff; /* --card, Card/Paper surfaces */
  --mantine-color-anchor: #141412; /* --ink; chrome links read as brand, not generic blue */
  --mantine-color-dimmed: #6a6862; /* --muted */
  --mantine-color-default-border: #e7e5df; /* --hair */
  --mantine-color-gray-3: #e7e5df; /* --hair; Card.Section border */
  --mantine-primary-color-filled: #141412; /* --ink; matches .btn-dark on the main site */
  --mantine-primary-color-filled-hover: #2a2a26;
}

:root[data-mantine-color-scheme='dark'] {
  --mantine-color-body: #161512; /* --paper (dark) */
  --mantine-color-text: #edeae3; /* --ink (dark) */
  --mantine-color-dark-6: #1e1d1a; /* --card (dark); Card surface */
  --mantine-color-dark-4: #2e2c27; /* --hair (dark); Card.Section border */
  --mantine-color-anchor: #edeae3;
  --mantine-color-dimmed: #9a978e; /* --muted (dark) */
  --mantine-color-default-border: #2e2c27;
  --mantine-primary-color-filled: #edeae3;
  --mantine-primary-color-filled-hover: #d9d5cc;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* ---------- OSG brand header (replaces the generic UptimeFlare logo) ---------- */
.osg-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--mantine-color-text);
  text-decoration: none;
}
.osg-brand:hover {
  opacity: 0.85;
}
.osg-brand .osg-mark {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background: var(--mantine-color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.osg-brand .osg-mark svg {
  display: block;
}
.osg-status-label {
  font-weight: 500;
  color: var(--mantine-color-dimmed);
}

/* ---------- OSG footer line (Footer.tsx customFooter) ---------- */
.osg-footer {
  text-align: center;
  font-size: 12.5px;
  color: var(--mantine-color-dimmed);
  margin-top: 10px;
  line-height: 1.6;
}
.osg-footer a {
  color: var(--mantine-color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}