:root {
  color-scheme: light;

  --ba-color-canvas: #f6f8fa;
  --ba-color-surface: #ffffff;
  --ba-color-surface-muted: #edf2f6;
  --ba-color-surface-selected: #eaf2ff;
  --ba-color-border: #d8e0e7;
  --ba-color-border-strong: #aab6bf;
  --ba-color-header: #111f2d;
  --ba-color-text: #172230;
  --ba-color-text-secondary: #5b6877;
  --ba-color-text-inverse: #ffffff;
  --ba-color-action: #0369fc;
  --ba-color-action-hover: #0256d6;
  --ba-color-action-active: #0144ad;
  --ba-color-link: #0b57d0;
  --ba-color-link-hover: #083f9e;
  --ba-color-data: #00afcb;
  --ba-color-data-text: #007285;
  --ba-color-best-value: #a8e600;
  --ba-color-success: #12843b;
  --ba-color-success-text: #107936;
  --ba-color-warning: #a15c00;
  --ba-color-warning-text: #985700;
  --ba-color-danger: #c73535;
  --ba-color-disabled-surface: #d8e0e7;
  --ba-color-disabled-text: #5b6877;
  --ba-color-best-value-text: #172230;
  --ba-color-header-text: #ffffff;
  --ba-color-nav-active: #122d57;
  --ba-color-best-value-surface: #edf9db;
  --ba-color-info-surface: #ebf5fe;
  --ba-color-header-text-secondary: #aab6bf;
  --ba-color-header-active: #4ea1ff;
  --ba-color-header-rule: #0369fc;
  --ba-color-success-surface: color-mix(in srgb, var(--ba-color-success) 12%, #ffffff);
  --ba-color-warning-surface: color-mix(in srgb, var(--ba-color-warning) 12%, #ffffff);
  --ba-color-danger-surface: color-mix(in srgb, var(--ba-color-danger) 10%, #ffffff);
  --ba-color-data-surface: color-mix(in srgb, var(--ba-color-data) 14%, #ffffff);

  --ba-font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --ba-font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ba-font-data: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ba-font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --ba-line-height-tight: 1.15;
  --ba-line-height-body: 1.5;
  --ba-line-height-relaxed: 1.65;
  --ba-font-size-xs: 0.75rem;
  --ba-font-size-sm: 0.875rem;
  --ba-font-size-md: 1rem;
  --ba-font-size-lg: 1.125rem;
  --ba-font-size-xl: 1.5rem;
  --ba-font-size-2xl: 2rem;
  --ba-font-size-3xl: 3rem;
  --ba-font-size-4xl: 4rem;

  --ba-space-0: 0;
  --ba-space-1: 0.25rem;
  --ba-space-2: 0.5rem;
  --ba-space-3: 0.75rem;
  --ba-space-4: 1rem;
  --ba-space-5: 1.25rem;
  --ba-space-6: 1.5rem;
  --ba-space-8: 2rem;
  --ba-space-10: 2.5rem;
  --ba-space-12: 3rem;
  --ba-space-16: 4rem;
  --ba-space-20: 5rem;

  --ba-radius-xs: 0.25rem;
  --ba-radius-sm: 0.5rem;
  --ba-radius-md: 0.75rem;
  --ba-radius-lg: 1rem;
  --ba-radius-pill: 999px;
  --ba-shadow-sm: 0 1px 2px rgb(18 26 36 / 8%);
  --ba-shadow-md: 0 8px 24px rgb(18 26 36 / 10%);
  --ba-shadow-focus: 0 0 0 2px var(--ba-color-canvas), 0 0 0 4px var(--ba-color-action);
  --ba-layout-content-max: 80rem;
  --ba-layout-reading-max: 46rem;
  --ba-control-min-height: 2.75rem;
  --ba-touch-target-min: 2.75rem;
  --ba-motion-fast: 120ms;
  --ba-motion-standard: 180ms;
  --ba-motion-deliberate: 240ms;
  --ba-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --ba-z-sticky: 10;
  --ba-z-dropdown: 20;
  --ba-z-modal: 50;
}

[data-theme="dark"] {
  color-scheme: dark;
  --ba-color-canvas: #111417;
  --ba-color-surface: #1b2229;
  --ba-color-surface-muted: #252b30;
  --ba-color-surface-selected: #183354;
  --ba-color-border: #39444d;
  --ba-color-border-strong: #657382;
  --ba-color-header: #101417;
  --ba-color-text: #eef3f5;
  --ba-color-text-secondary: #aab6bf;
  --ba-color-text-inverse: #111417;
  --ba-color-action: #00cfe8;
  --ba-color-action-hover: #33dcf0;
  --ba-color-action-active: #66e5f5;
  --ba-color-link: #4ea1ff;
  --ba-color-link-hover: #78b7ff;
  --ba-color-data: #00cfe8;
  --ba-color-data-text: #61ddeb;
  --ba-color-best-value: #b8f500;
  --ba-color-success: #4ed37b;
  --ba-color-success-text: #4ed37b;
  --ba-color-warning: #ffb454;
  --ba-color-warning-text: #ffb454;
  --ba-color-danger: #ff7b7b;
  --ba-color-disabled-surface: #39444d;
  --ba-color-disabled-text: #aab6bf;
  --ba-color-best-value-text: #111417;
  --ba-color-header-text: #eef3f5;
  --ba-color-header-active: #00cfe8;
  --ba-color-header-rule: #2a343c;
  --ba-color-nav-active: #183354;
  --ba-color-best-value-surface: color-mix(in srgb, var(--ba-color-best-value) 14%, var(--ba-color-surface));
  --ba-color-info-surface: #0e2f39;
  --ba-color-success-surface: color-mix(in srgb, var(--ba-color-success) 20%, var(--ba-color-surface));
  --ba-color-warning-surface: color-mix(in srgb, var(--ba-color-warning) 20%, var(--ba-color-surface));
  --ba-color-danger-surface: color-mix(in srgb, var(--ba-color-danger) 20%, var(--ba-color-surface));
  --ba-color-data-surface: color-mix(in srgb, var(--ba-color-data) 20%, var(--ba-color-surface));
}

.ba-data {
  font-family: var(--ba-font-data);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 0;
  box-shadow: var(--ba-shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ba-motion-fast: 0ms;
    --ba-motion-standard: 0ms;
    --ba-motion-deliberate: 0ms;
  }
}