: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-color-text: var(--ks-color-neutral-950);
  --ks-color-text-muted: var(--ks-color-neutral-600);
  --ks-color-text-on-dark: var(--ks-color-surface);
  --ks-color-surface-raised: var(--ks-color-surface);
  --ks-color-border: var(--ks-color-neutral-200);
  --ks-color-border-strong: var(--ks-color-neutral-300);
  --ks-color-warning-border: var(--ks-color-warning);
  --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-shadow-lg: 0 16px 48px rgb(0 0 0 / 16%);
  --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;
  --ks-focus-ring-width: 3px;
  --ks-focus-ring-offset: 2px;
  --ks-shell-sidebar-width: 16rem;
  --ks-shell-header-height: 3.5rem;
  --ks-shell-sidenav-width: 13.75rem;
  --ks-shell-sidenav-collapsed: 3.5rem;
  --ks-shell-tabs-height: 2.5rem;
  --ks-shell-pageheader-height: 3rem;
  --ks-shell-commandbar-height: 2.75rem;
}

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