/* Brand tokens, Sora font and the shared header. Served anonymously at /brand/ (the sign-in pages use it too). */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/brand/sora-var.woff2") format("woff2"); }

:root {
  --brand-navy: #1b2230; --brand-cyan: #4fd1ff; --brand-cyan-ink: #0b7fae;
  --bg: #f5f7f8; --surface: #ffffff; --text: #14202b; --muted: #5b6b78;
  --link: var(--brand-cyan-ink); --primary-bg: var(--brand-cyan-ink); --primary-text: #ffffff;
  --line: #d5dde3; --input-bg: #ffffff; --msg-bg: #e4eef3; --err-bg: #fbe3e2; --err-text: #8a211e;
  --ok: #2e9e5b; --warn: #e08a00; --error: #d64541;
  --font-display: "Sora", system-ui, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1219; --surface: #121c26; --text: #e6edf2; --muted: #93a3b0;
    --link: var(--brand-cyan); --primary-bg: var(--brand-cyan); --primary-text: var(--brand-navy);
    --line: #2a3a48; --input-bg: #0b1219; --msg-bg: #1c2a37; --err-bg: #3d1f21; --err-text: #f1b5b3;
  }
}

/* header bar: navy in both schemes, mark left of the wordmark */
.mk-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #e6edf2; }
.mk-brand svg { height: 20px; width: auto; display: block; }
.mk-brand svg path { stroke: var(--brand-cyan); }
.mk-word { font: 700 18px/1 var(--font-display); letter-spacing: -0.01em; }
.mk-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }