:root {
  --brand-red: #ed2327;        /* Sampled from the Demain Intelligence wordmark accent. */
  --bg: #ffffff;
  --bg-soft: #f5f6f7;
  --surface-dark: #090b0d;
  --surface-dark-soft: #11141a;
  --text: #141414;
  --text-strong: #0d0d0d;
  --muted: #353941;
  --text-on-dark: #f5f7fb;
  --muted-on-dark: #c7ccd6;
  --border-soft: rgba(20, 20, 20, 0.12);
  --border-on-dark: rgba(245, 247, 251, 0.22);
  --color-primary: var(--text);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--brand-red);
  --color-background: var(--bg);
  --color-secondary: var(--bg-soft);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1014;
    --bg-soft: #16171b;
    --surface-dark: #06070a;
    --surface-dark-soft: #0d0e12;
    --text: #f2f4f8;
    --text-strong: #ffffff;
    --muted: #d0d4dc;
    --text-on-dark: #f7f9fc;
    --muted-on-dark: #d9dde5;
    --border-soft: rgba(255, 255, 255, 0.18);
    --border-on-dark: rgba(255, 255, 255, 0.24);
    color-scheme: dark;
  }
}

html,
body {
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--brand-red);
  text-decoration-color: color-mix(in oklab, var(--brand-red) 35%, currentColor);
}

a:hover,
a:focus-visible {
  text-decoration-color: var(--brand-red);
}

button.primary,
.btn-primary {
  background: var(--brand-red);
  color: #fff;
  border: none;
}

button.primary:hover,
.btn-primary:hover {
  filter: brightness(0.95);
}

:focus-visible {
  outline: 3px solid var(--brand-red);
  outline-offset: 3px;
}

.smallcaps {
  letter-spacing: 0.22em;
  font-weight: 300;
  text-transform: uppercase;
}

.brand-logo img {
  height: auto;
  max-width: min(60vw, 320px);
}