:root {
  --ks-color-action: #174a7e;
  --ks-color-action-hover: #123b65;
  --ks-color-info: #2563eb;
  --ks-color-success: #137333;
  --ks-color-warning: #9a6700;
  --ks-color-danger: #b42318;
  --ks-color-neutral-950: #111827;
  --ks-color-neutral-800: #1f2937;
  --ks-color-neutral-700: #374151;
  --ks-color-neutral-600: #4b5563;
  --ks-color-neutral-500: #6b7280;
  --ks-color-neutral-300: #d1d5db;
  --ks-color-neutral-200: #e5e7eb;
  --ks-color-neutral-100: #f3f4f6;
  --ks-color-surface: #ffffff;
  --ks-color-canvas: #f7f8fa;
  --ks-color-focus: #2563eb;
  --ks-space-1: 0.25rem;
  --ks-space-2: 0.5rem;
  --ks-space-3: 0.75rem;
  --ks-space-4: 1rem;
  --ks-space-6: 1.5rem;
  --ks-space-8: 2rem;
  --ks-radius-sm: 0.25rem;
  --ks-radius-md: 0.5rem;
  --ks-radius-lg: 0.75rem;
  --ks-shadow-sm: 0 1px 2px rgb(0 0 0 / 8%);
  --ks-shadow-md: 0 8px 24px rgb(0 0 0 / 10%);
  --ks-font-page: 1.5rem;
  --ks-line-page: 2rem;
  --ks-font-section: 1.125rem;
  --ks-line-section: 1.625rem;
  --ks-font-body: 0.875rem;
  --ks-line-body: 1.375rem;
  --ks-font-caption: 0.75rem;
  --ks-line-caption: 1.125rem;
  --ks-control-height: 2.75rem;
  --ks-grid-density: 2.25rem;
  --ks-content-max: 100rem;
}

[data-density='compact'] {
  --ks-control-height: 2.25rem;
  --ks-grid-density: 2rem;
}