/* Generated by @belai/tokens from tokens.json. Do not edit.
 * Not tokens (one-offs the seed's CSS keeps for itself):
 *   --mark-clear: the brand mark's clear space, set inline from marks.json by the mark component, not a theme value
 *   --mark-h: the brand mark's height, set inline from marks.json by the mark component, not a theme value
 */
:root {
  color-scheme: light;
  --color-ink: #101418;
  --color-paper: #ffffff;
  --color-surface: #f6f7f9;
  --color-muted: #5b6672;
  --color-line: #e2e6ea;
  --color-accent: #1d66d8;
  --color-accent-ink: #ffffff;
  --color-good: #087443;
  --color-warn: #a74d08;
  --color-bad: #b42318;
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-accent-soft-strong: color-mix(in srgb, var(--color-accent) 25%, transparent);
  --color-good-soft: color-mix(in srgb, var(--color-good) 15%, transparent);
  --color-good-soft-strong: color-mix(in srgb, var(--color-good) 30%, transparent);
  --color-warn-soft: color-mix(in srgb, var(--color-warn) 15%, transparent);
  --color-warn-soft-strong: color-mix(in srgb, var(--color-warn) 30%, transparent);
  --color-bad-soft: color-mix(in srgb, var(--color-bad) 15%, transparent);
  --color-bad-soft-strong: color-mix(in srgb, var(--color-bad) 30%, transparent);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-base: 1rem;
  --size-lg: 1.125rem;
  --size-xl: 1.25rem;
  --size-2xl: 1.5rem;
  --size-3xl: 1.875rem;
  --space-0: 0px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-px: 1px;
  --width-xs: 16rem;
  --width-sm: 24rem;
  --width-md: 32rem;
  --width-lg: 42rem;
  --radius-none: 0px;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1.125rem;
  --radius-full: 9999px;
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 6px rgba(0, 0, 0, 0.04);
  --focus-color: var(--color-accent);
  --focus-width: 2px;
  --focus-offset: 1px;
  --control-sm: 1.5rem;
  --control-md: 2rem;
  --control-lg: 2.75rem;
  --breakpoint-sm: 720px;
  --breakpoint-md: 1000px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) {
    color-scheme: dark;
    --color-ink: #f6f7f9;
    --color-paper: color-mix(in srgb, #101418 94%, #ffffff);
    --color-surface: color-mix(in srgb, #101418 88%, #ffffff);
    --color-muted: color-mix(in srgb, #5b6672 55%, #ffffff);
    --color-line: color-mix(in srgb, #101418 80%, #ffffff);
    --color-accent: color-mix(in srgb, #1f6feb 70%, #ffffff);
    --color-accent-ink: #101418;
    --color-good: color-mix(in srgb, #087443 55%, #ffffff);
    --color-warn: color-mix(in srgb, #b45309 65%, #ffffff);
    --color-bad: color-mix(in srgb, #b42318 55%, #ffffff);
  }
}
:root[data-color-scheme="dark"] {
  color-scheme: dark;
  --color-ink: #f6f7f9;
  --color-paper: color-mix(in srgb, #101418 94%, #ffffff);
  --color-surface: color-mix(in srgb, #101418 88%, #ffffff);
  --color-muted: color-mix(in srgb, #5b6672 55%, #ffffff);
  --color-line: color-mix(in srgb, #101418 80%, #ffffff);
  --color-accent: color-mix(in srgb, #1f6feb 70%, #ffffff);
  --color-accent-ink: #101418;
  --color-good: color-mix(in srgb, #087443 55%, #ffffff);
  --color-warn: color-mix(in srgb, #b45309 65%, #ffffff);
  --color-bad: color-mix(in srgb, #b42318 55%, #ffffff);
}