/* Keln brand over Material — tokens from the shared kit (portal_ui.py / keln.ai):
   Geist, ink #0d0d0d on white, 1.5px borders, pill accents, tight tracking. */
@font-face {
  font-family: 'Geist';
  src: url('https://keln.ai/fonts/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --md-primary-fg-color: #0d0d0d;
  --md-primary-fg-color--dark: #0d0d0d;
  --md-accent-fg-color: #3B82F6;
  --md-typeset-a-color: #243EA5;
  --md-text-font: 'Geist', system-ui, -apple-system, sans-serif;
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0d0d0d;
  --md-typeset-a-color: #7ea6ff;
}

body, .md-typeset { letter-spacing: -0.01em; }
.md-typeset h1 { font-weight: 650; letter-spacing: -0.03em; }
.md-typeset h2 { font-weight: 600; letter-spacing: -0.02em; }
.md-header { background: #0d0d0d; }
.md-tabs { background: #0d0d0d; }
.md-tabs__link { color: rgba(255,255,255,.7); }
.md-tabs__link--active, .md-tabs__link:hover { color: #fff; }
.md-typeset code { border-radius: 6px; }
.md-typeset .md-button--primary {
  background: #0d0d0d; border: 1.5px solid #0d0d0d; border-radius: 999px;
}
.md-typeset .md-button { border-radius: 999px; border-width: 1.5px; }
.md-typeset table:not([class]) { border-radius: 12px; }

/* ── Diagram tokens — assets/diagrams/*.svg are inlined (pymdownx.snippets) so
   they inherit these vars and adapt to both themes from one file. One accent
   per schema: spend it only on the diagram's "moment". ─────────────────────── */
:root {
  --kd-ink: #0d0d0d;      /* primary strokes + labels */
  --kd-mut: #6f6f6f;      /* secondary labels, guides */
  --kd-line: #d9d9d6;     /* hairlines, rails */
  --kd-soft: #f5f5f4;     /* soft node fill */
  --kd-paper: #ffffff;    /* page-matching fill */
  --kd-accent: #3B82F6;   /* the moment */
  --kd-ok: #16a34a;
  --kd-bad: #dc2626;
}
[data-md-color-scheme="slate"] {
  --kd-ink: #f0efed;
  --kd-mut: #9a9a97;
  --kd-line: #34342f;
  --kd-soft: #1b1b19;
  --kd-paper: #101010;
  --kd-accent: #7ea6ff;
  --kd-ok: #34d399;
  --kd-bad: #f87171;
}
.kd-diagram { margin: 1.4em 0 1.8em; }
.kd-diagram svg { max-width: 100%; height: auto; display: block; }
.kd-caption { font-size: .72rem; color: var(--kd-mut); margin-top: .5em; letter-spacing: 0; }