:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 18px;
  --text-xl: 28px;
  --text-2xl: 36px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --bg: var(--theme-bg, #0b1220);
  --surface-1: var(--theme-surface, #111a2b);
  --surface-2: var(--theme-surface-2, #152137);
  --border: var(--theme-border, #263247);
  --text-primary: var(--theme-text, #e8eef8);
  --text-secondary: var(--theme-text-muted, #aebad0);
  --text-muted: var(--theme-text-muted, #8794ac);
  --accent: var(--theme-link, #22c55e);
  --danger: var(--theme-danger, #ef4444);
  --warning: var(--theme-warning, #f59e0b);
  --success: var(--theme-success, #22c55e);

  --comp-card-bg: var(--surface-1);
  --comp-card-border: var(--border);
  --comp-card-padding: var(--space-4);
  --comp-card-header-bg: var(--surface-2);

  --comp-kpi-bg: var(--surface-2);
  --comp-kpi-border: var(--border);
  --comp-kpi-padding: var(--space-3);
  --kpi-value-size: var(--text-xl);
  --kpi-label-size: var(--text-sm);
  --kpi-meta-size: var(--text-xs);

  --table-row-min-height: 32px;
  --table-cell-py: 6px;
  --table-cell-px: 10px;

  --badge-bg-neutral: rgba(148, 163, 184, 0.25);
  --badge-text-neutral: var(--text-primary);

  --chart-series-1: #3b82f6;
  --chart-series-2: #10b981;
  --chart-series-3: #f59e0b;
  --chart-series-4: #ef4444;
  --chart-series-5: #8b5cf6;
  --chart-series-6: #14b8a6;
  --chart-series-7: #f97316;
  --chart-series-8: #22c55e;
}

[data-theme="light"] {
  --bg: var(--theme-bg, #f4f7fb);
  --surface-1: var(--theme-surface, #ffffff);
  --surface-2: var(--theme-surface-2, #f8fbff);
  --border: var(--theme-border, #d8e1ef);
  --text-primary: var(--theme-text, #0f172a);
  --text-secondary: var(--theme-text-muted, #334155);
  --text-muted: var(--theme-text-muted, #64748b);
  --accent: var(--theme-link, #15803d);
  --danger: var(--theme-danger, #dc2626);
  --warning: var(--theme-warning, #b45309);
  --success: var(--theme-success, #15803d);
  --badge-bg-neutral: rgba(100, 116, 139, 0.15);
}

.ui-card,
.ben-card,
.dash-card,
.sp-card,
.card-dark,
.ads-toolbar {
  background: var(--comp-card-bg);
  border: 1px solid var(--comp-card-border);
  border-radius: var(--radius-lg);
}

.ui-card-body,
.ben-card .card-body {
  padding: var(--comp-card-padding);
}

.ui-card-header,
.ben-card .card-header,
.dash-card-header,
.sp-card-header,
.ad-card-header,
.card-header-dark {
  background: var(--comp-card-header-bg);
  border-bottom: 1px solid var(--comp-card-border);
}

.ui-kpi,
.ben-kpi,
.dash-kpi,
.kpi-card,
.kpi-card-sm {
  background: var(--comp-kpi-bg);
  border: 1px solid var(--comp-kpi-border);
  border-radius: var(--radius-md);
  padding: var(--comp-kpi-padding);
}

.ui-kpi-value,
.ben-kpi .fs-4 {
  font-size: var(--kpi-value-size) !important;
  line-height: 1.15;
  font-weight: var(--weight-bold);
}

.ui-kpi-label,
.ben-kpi .small {
  font-size: var(--kpi-meta-size);
}

.ui-kpi-meta {
  color: var(--text-secondary);
  font-size: var(--kpi-meta-size);
}

.ui-table-dense td,
.ui-table-dense th,
.ben-kpi .table td,
.ben-kpi .table th {
  min-height: var(--table-row-min-height);
  padding: var(--table-cell-py) var(--table-cell-px);
}

.ui-badge-neutral,
.badge.bg-secondary {
  background: var(--badge-bg-neutral) !important;
  color: var(--badge-text-neutral) !important;
}

.ui-priority-1 {
  background: var(--surface-2);
  border-color: var(--comp-card-border);
}

.ui-priority-2 {
  background: var(--surface-1);
}

.ui-priority-3 {
  background: color-mix(in srgb, var(--surface-1) 86%, transparent);
}

@media (max-width: 768px) {
  .ui-card-body,
  .ben-card .card-body {
    padding: var(--space-3);
  }

  .ui-kpi,
  .ben-kpi,
  .dash-kpi,
  .kpi-card,
  .kpi-card-sm {
    padding: var(--space-2) var(--space-3);
  }
}