@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #0A0A0B;
  --surface: #111214;
  --surface-2: #1D1E21;
  --border: #2D2E33;
  --text: #FFFFFF;
  --muted: #A6A7AC;
  --accent: #FFFFFF;
  --accent-hover: #A6A7AC;
  --blue: #A6A7AC;
  --focus: #FFFFFF;
}

body {
  background:
    radial-gradient(ellipse at 50% -15%, rgba(166, 167, 172, 0.14), transparent 42%),
    var(--bg);
  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

::selection {
  background: rgba(255, 255, 255, 0.28);
  color: #0A0A0B;
}

.skip-link,
.login-card button,
.filters button {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: #0A0A0B;
}

.login-card button:hover,
.filters button:hover {
  border-color: #A6A7AC;
  background: #A6A7AC;
}

.login-card,
.overview,
.feature-grid,
.live-alert-form {
  background: #111214;
  border-color: #2D2E33;
}

.login-card input,
.filters input,
.filters select,
.chip,
.live-alert-form textarea {
  background: #0A0A0B;
  border-color: #2D2E33;
}

.tile,
.chart-card {
  background: linear-gradient(135deg, #111214, #1D1E21);
  border-color: #2D2E33;
}

.recent-failures-table th,
.recent-failures-table td {
  border-bottom-color: #2D2E33;
}

.recent-failures-table tbody tr:hover {
  background: #1D1E21;
}

.chip:hover {
  border-color: #A6A7AC;
}

.brand h1 {
  letter-spacing: 0.08em;
}

.brand-logo,
.login-logo {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}