:root {
  color-scheme: light;
  --bg: #f6f8f7;
  --elev: #ffffff;
  --surface: #ffffff;
  --line: #dce4e1;
  --line2: #c7d4d0;
  --line-2: #c7d4d0;
  --ink: #0d1715;
  --muted: #5f6d69;
  --faint: #75827e;
  --teal: #0f766e;
  --tealB: #0f766e;
  --teal-bright: #0f766e;
  --teal-deep: #115e59;
  --serif: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background: var(--bg);
  color: var(--ink);
}

a { color: var(--teal); }
a:hover { color: var(--teal-deep); }
a:focus-visible {
  outline: 3px solid rgba(15, 118, 110, .28);
  outline-offset: 4px;
  border-radius: 3px;
}

header.site {
  border-bottom: 1px solid var(--line);
}

.brand,
nav.site a:hover,
p b,
li b,
footer.site a:hover {
  color: var(--ink);
}

.eyebrow {
  color: var(--teal);
  font-weight: 700;
  letter-spacing: .08em;
}

h1,
h2 {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.035em;
}

.notice,
.card,
.stat-card,
.type-sample,
.swatch,
.shot {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 10px 30px rgba(13, 23, 21, .045);
}

.dot.ok {
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, .12);
}

.dot.wait { background: #9baba6; }

.logo-tile.dark { background: #071a17; }
.logo-tile.dark .lbl { color: #a8bdb7; }
.logo-tile.light { background: var(--surface); }

.ok { color: var(--teal); }
.btn.primary {
  border-color: var(--teal);
  background: var(--teal);
  color: #ffffff;
}
.btn.primary:hover {
  border-color: var(--teal-deep);
  background: var(--teal-deep);
  color: #ffffff;
}

footer.site {
  border-color: var(--line);
  color: var(--faint);
}

@media (max-width: 620px) {
  header.site { align-items: flex-start; gap: 18px; }
  nav.site { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; }
  nav.site a { margin-left: 0; }
}