/* Kalman design tokens — generated from tokens.json. Do not hand-edit values here; edit tokens.json. */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=PT+Serif:ital@0;1&display=swap"); :root { --k-ink: #0B0E13; --k-ink-raised: #10141B; --k-ink-bubble: #171C24; --k-grid: #161A22; --k-line: #1C212A; --k-line-strong: #262B35; --k-slate: #343A47; --k-mist: #8B909A; --k-fog: #A9ADB5; --k-bone-soft: #D6D2C8; --k-bone: #ECE8DF; --k-magenta: #F43FC8; --k-magenta-deep: #A8187F; --k-magenta-soft: #F99BDF; --k-candle-up: #2FB67C; --k-candle-down: #E35D52; --k-candle-mono-down: #5A606C; --k-warning: #E8A33D; --k-font-display: "Instrument Serif", "PT Serif", Georgia, serif; --k-font-text: "IBM Plex Sans", system-ui, sans-serif; --k-font-data: "IBM Plex Mono", "IBM Plex Sans", ui-monospace, monospace; --k-space-0: 0px; --k-space-4: 4px; --k-space-8: 8px; --k-space-12: 12px; --k-space-16: 16px; --k-space-20: 20px; --k-space-24: 24px; --k-space-32: 32px; --k-space-40: 40px; --k-space-48: 48px; --k-space-56: 56px; --k-space-64: 64px; --k-space-72: 72px; --k-radius-sm: 6px; --k-radius-md: 12px; --k-radius-lg: 16px; --k-radius-card: 20px; --k-radius-pill: 999px; --k-size-display-xl: 136px; --k-leading-display-xl: 0.95; --k-size-display-l: 76px; --k-leading-display-l: 1.0; --k-size-display-m: 56px; --k-leading-display-m: 1.0; --k-size-title: 32px; --k-leading-title: 1.1; --k-size-body-l: 18px; --k-leading-body-l: 1.6; --k-size-body: 16px; --k-leading-body: 1.5; --k-size-small: 14px; --k-leading-small: 1.5; --k-size-label: 12px; --k-leading-label: 1.3; --k-size-data-l: 26px; --k-leading-data-l: 1.2; --k-size-data-m: 20px; --k-leading-data-m: 1.3; --k-focus-ring: 0 0 0 2px var(--k-ink), 0 0 0 4px var(--k-magenta); color-scheme: dark; } /* Minimal base. Opt in by adding class="kalman" to or . */ .kalman { background: var(--k-ink); color: var(--k-bone); font-family: var(--k-font-text); font-size: var(--k-size-body); line-height: var(--k-leading-body); } .kalman .k-data, .kalman code, .kalman kbd, .kalman samp { font-family: var(--k-font-data); font-variant-numeric: tabular-nums; } .kalman .k-display { font-family: var(--k-font-display); font-weight: 400; } /* Labels: write the text in UPPERCASE yourself. Never use text-transform: uppercase — it turns μ into Μ and σ into Σ. */ .kalman .k-label { font-family: var(--k-font-data); font-size: var(--k-size-label); letter-spacing: 0.12em; color: var(--k-mist); } .kalman a { color: var(--k-magenta); } .kalman a:hover { color: var(--k-magenta-soft); } .kalman :focus-visible { outline: 2px solid var(--k-magenta); outline-offset: 3px; }