:root {
  --ba-primary-100: oklch(0.93 0.02 235);
  --ba-primary-200: oklch(0.85 0.035 235);
  --ba-primary-300: oklch(0.74 0.05 235);
  --ba-primary-400: oklch(0.62 0.065 235);
  --ba-primary-500: oklch(0.46 0.078 235);
  --ba-primary-600: oklch(0.38 0.07 235);
  --ba-primary-700: oklch(0.30 0.06 235);
  --ba-primary-800: oklch(0.23 0.05 235);
  --ba-primary-900: oklch(0.155 0.035 235);
  --ba-accent-100: oklch(0.93 0.05 155);
  --ba-accent-300: oklch(0.76 0.13 155);
  --ba-accent-500: oklch(0.60 0.15 155);
  --ba-accent-600: oklch(0.51 0.135 155);
  --ba-accent-700: oklch(0.42 0.11 155);
  --ba-accent-800: oklch(0.33 0.08 155);

  --ba-font-heading: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ba-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ba-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --ba-space-1: 4px;
  --ba-space-2: 8px;
  --ba-space-3: 12px;
  --ba-space-4: 16px;
  --ba-space-5: 20px;
  --ba-space-6: 24px;
  --ba-space-8: 32px;
  --ba-space-10: 40px;
  --ba-space-12: 48px;
  --ba-space-16: 64px;
  --ba-space-20: 80px;
  --ba-space-24: 96px;
  --ba-radius-sm: 6px;
  --ba-radius-md: 10px;
  --ba-radius-lg: 16px;
  --ba-radius-xl: 24px;
  --ba-radius-full: 999px;
  --ba-duration-fast: 120ms;
  --ba-duration-base: 200ms;
  --ba-ease-standard: cubic-bezier(.2, .8, .2, 1);
}

:root,
:root[data-theme='light'] {
  --ba-page: oklch(0.98 0.004 230);
  --ba-page-alt: oklch(0.955 0.007 230);
  --ba-surface: oklch(1 0 0);
  --ba-surface-strong: oklch(0.985 0.004 230);
  --ba-text: oklch(0.19 0.014 235);
  --ba-text-muted: oklch(0.44 0.014 235);
  --ba-text-faint: oklch(0.62 0.012 235);
  --ba-border: oklch(0.885 0.006 230);
  --ba-border-strong: oklch(0.78 0.008 230);
  --ba-action: var(--ba-accent-600);
  --ba-action-hover: var(--ba-accent-700);
  --ba-action-text: white;
  --ba-focus: var(--ba-accent-600);
  --ba-shadow-sm: 0 1px 2px oklch(0.155 0.035 235 / .08);
  --ba-shadow-md: 0 4px 12px oklch(0.155 0.035 235 / .10), 0 1px 3px oklch(0.155 0.035 235 / .08);
  --ba-shadow-lg: 0 16px 40px oklch(0.155 0.035 235 / .14), 0 4px 10px oklch(0.155 0.035 235 / .08);
}

:root[data-theme='dark'] {
  --ba-page: #101820;
  --ba-page-alt: #15212b;
  --ba-surface: #192631;
  --ba-surface-strong: #1e2e3a;
  --ba-text: #f3f7f6;
  --ba-text-muted: #b4c1c5;
  --ba-text-faint: #87979d;
  --ba-border: #2d414e;
  --ba-border-strong: #466070;
  --ba-action: var(--ba-accent-500);
  --ba-action-hover: var(--ba-accent-300);
  --ba-action-text: #10251c;
  --ba-focus: var(--ba-accent-300);
  --ba-shadow-sm: 0 1px 2px rgb(0 0 0 / .18);
  --ba-shadow-md: 0 5px 16px rgb(0 0 0 / .22);
  --ba-shadow-lg: 0 18px 42px rgb(0 0 0 / .28);
}