:root {
  /* Layout */
  --bf-sidebar-w: 260px;
  --bf-sidebar-w-collapsed: 84px;

  /* Typography & spacing */
  --bf-font-sans: "IBM Plex Sans", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bf-font-size-base: 13.5px;
  --bf-font-size-sm: 12.5px;
  --bf-font-size-xs: 12px;
  --bf-font-size-lg: 14px;
  --bf-line-height-base: 1.4;
  --bf-line-height-tight: 1.3;

  --bf-radius-xs: 4px;
  --bf-radius-sm: 6px;
  --bf-radius: 8px;
  --bf-radius-lg: 10px;

  --bf-space-1: 4px;
  --bf-space-2: 6px;
  --bf-space-3: 8px;
  --bf-space-4: 10px;
  --bf-space-5: 12px;

  /* Light theme */
  --bf-surface-0: #f5f7fb;
  --bf-surface-1: #ffffff;
  --bf-surface-2: #eef2f7;
  --bf-ink-0: #0b1220;
  --bf-ink-1: #111827;
  --bf-ink-2: #1f2937;
  --bf-ink-3: #4b5563;
  --bf-muted: #94a3b8;
  --bf-border: #e5e7eb;
  --bf-border-strong: #d0d5dd;
  --bf-accent: #2d6cdf;
  --bf-accent-weak: rgba(45, 108, 223, 0.1);
  --bf-accent-hover: #1d4ed8;
  --bf-accent-pressed: #1e40af;
  --bf-accent-active: #1e40af;
  --bf-accent-ink: #ffffff;
  --bf-success: #16a34a;
  --bf-success-rgb: 22, 163, 74;
  --bf-warning: #d97706;
  --bf-warning-rgb: 217, 119, 6;
  --bf-danger: #dc2626;
  --bf-danger-rgb: 220, 38, 38;
  --bf-danger-hover: #b91c1c;
  --bf-danger-active: #991b1b;
  --bf-danger-ink: #ffffff;
  --bf-focus-ring: 0 0 0 3px rgba(45, 108, 223, 0.25);

  /* Data palettes */
  --bf-data-1: #2d6cdf;
  --bf-data-2: #10b981;
  --bf-data-3: #f59e0b;
  --bf-data-4: #6366f1;
  --bf-data-5: #0ea5e9;
  --bf-data-6: #ef4444;
  --bf-heat-low: #e2e8f0;
  --bf-heat-mid: #94a3b8;
  --bf-heat-high: #0ea5e9;

  /* Density defaults (ultra-dense) */
  --bf-row-h: auto;
  --bf-row-h-compact: auto;
  --bf-cell-pad-y: 1.5px;
  --bf-cell-pad-x: 12px;

  /* Form controls */
  --bf-input-height: 28px;
  --bf-input-height-sm: 24px;
  --bf-input-padding-y: 4px;
  --bf-input-padding-x: 8px;
  --bf-label-font-size: 11px;
  --bf-label-margin-bottom: 2px;

  /* Shadows */
  --bf-shadow-1: 0 8px 22px rgba(15, 23, 42, 0.07);
  --bf-shadow-2: 0 10px 28px rgba(15, 23, 42, 0.12);

  --bf-primary: var(--bf-accent);
  --bf-primary-rgb: 45, 108, 223;
}

body[data-bf-density="compact"],
:root[data-bf-density="compact"] {
  --bf-row-h: 28px;
  --bf-cell-pad-y: 3px;
  --bf-cell-pad-x: 6px;
}

body[data-bf-theme="dark"],
:root[data-bf-theme="dark"],
body.theme-deepblue {
  --bf-surface-0: #0b1220;
  --bf-surface-1: #0f172a;
  --bf-surface-2: #101c35;
  --bf-ink-0: #e5e7eb;
  --bf-ink-1: #e5e7eb;
  --bf-ink-2: #cbd5e1;
  --bf-ink-3: #94a3b8;
  --bf-muted: #94a3b8;
  --bf-border: rgba(255, 255, 255, 0.1);
  --bf-border-strong: rgba(255, 255, 255, 0.18);
  --bf-accent: #60a5fa;
  --bf-accent-weak: rgba(96, 165, 250, 0.15);
  --bf-accent-hover: #3b82f6;
  --bf-accent-pressed: #2563eb;
  --bf-accent-active: #2563eb;
  --bf-accent-ink: #0b1220;
  --bf-success: #34d399;
  --bf-success-rgb: 52, 211, 153;
  --bf-warning: #fbbf24;
  --bf-warning-rgb: 251, 191, 36;
  --bf-danger: #f87171;
  --bf-danger-rgb: 248, 113, 113;
  --bf-danger-hover: #ef4444;
  --bf-danger-active: #dc2626;
  --bf-danger-ink: #0b1220;
  --bf-shadow-1: 0 10px 28px rgba(0, 0, 0, 0.35);
  --bf-shadow-2: 0 14px 38px rgba(0, 0, 0, 0.45);
  --bf-heat-low: #1f2937;
  --bf-heat-mid: #334155;
  --bf-heat-high: #38bdf8;
  --bf-primary: var(--bf-accent);
  --bf-primary-rgb: 96, 165, 250;
}

body[data-bf-theme="catppuccin-mocha"],
:root[data-bf-theme="catppuccin-mocha"] {
  --bf-surface-0: #1e1e2e;
  --bf-surface-1: #313244;
  --bf-surface-2: #45475a;
  --bf-ink-0: #cdd6f4;
  --bf-ink-1: #cdd6f4;
  --bf-ink-2: #bac2de;
  --bf-ink-3: #a6adc8;
  --bf-muted: #9399b2;
  --bf-border: #45475a;
  --bf-border-strong: #585b70;
  --bf-accent: #89b4fa;
  --bf-accent-weak: rgba(137, 180, 250, 0.15);
  --bf-accent-hover: #74c7ec;
  --bf-accent-pressed: #89dceb;
  --bf-accent-active: #89dceb;
  --bf-accent-ink: #1e1e2e;
  --bf-success: #a6e3a1;
  --bf-success-rgb: 166, 227, 161;
  --bf-warning: #f9e2af;
  --bf-warning-rgb: 249, 226, 175;
  --bf-danger: #f38ba8;
  --bf-danger-rgb: 243, 139, 168;
  --bf-danger-hover: #eba0ac;
  --bf-danger-active: #f38ba8;
  --bf-danger-ink: #1e1e2e;
  --bf-shadow-1: 0 10px 28px rgba(0, 0, 0, 0.4);
  --bf-shadow-2: 0 14px 38px rgba(0, 0, 0, 0.5);
  --bf-heat-low: #313244;
  --bf-heat-mid: #585b70;
  --bf-heat-high: #94e2d5;
  --bf-primary: var(--bf-accent);
  --bf-primary-rgb: 137, 180, 250;
}