:root {
  --ehanor-green-100: #66d575;
  --ehanor-green-300: #3da651;
  --ehanor-blue-100: #7f9cab;
  --ehanor-blue-200: #426b84;
  --ehanor-blue-300: #25516b;
  --ehanor-blue-400: #0e3d5d;
  --ehanor-ink: #08131f;
  --ehanor-surface: rgba(8, 19, 31, 0.84);
  --ehanor-border: rgba(127, 156, 171, 0.22);
  --ehanor-text: #d9e7e6;
  --ehanor-muted: #b6cbca;
  --ehanor-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.28);
}

body {
  color: var(--ehanor-text);
  background:
    linear-gradient(180deg, rgba(8, 19, 31, 0.78), rgba(8, 19, 31, 0.92)),
    url("https://sso.ehanor.fr/brand/background.png") center top / cover fixed no-repeat;
}

#app {
  backdrop-filter: blur(8px);
}

.header,
.dashboard,
.card,
.announcement,
.endpoint,
.results,
.footer {
  color: var(--ehanor-text);
}

.header,
.card,
.announcement,
.endpoint {
  background: var(--ehanor-surface);
  border: 1px solid var(--ehanor-border);
  border-radius: 18px;
  box-shadow: var(--ehanor-shadow);
}

.header {
  background:
    linear-gradient(135deg, rgba(14, 61, 93, 0.88), rgba(37, 81, 107, 0.64));
}

.header img {
  max-height: 52px;
}

.dashboard h1,
.header h1,
.header h2 {
  color: var(--ehanor-text);
}

.dashboard p,
.header p,
.muted,
.footer,
.announcement time {
  color: var(--ehanor-muted);
}

a,
.link,
button {
  color: var(--ehanor-blue-100);
}

button,
.btn,
a.button {
  border-radius: 999px;
  border: 1px solid rgba(127, 156, 171, 0.26);
  background: rgba(14, 61, 93, 0.42);
}

.success,
.healthy,
.up {
  color: var(--ehanor-green-100);
}

.warning,
.degraded {
  color: #f3c969;
}

.failure,
.unhealthy,
.down {
  color: #ff8b8b;
}

@media (max-width: 720px) {
  .header,
  .card,
  .announcement,
  .endpoint {
    border-radius: 14px;
  }
}