:root {
  /* Spacing scale */
  --va-space-1: 0.5rem;
  --va-space-2: 0.75rem;
  --va-space-3: 1rem;
  --va-space-4: 1.5rem;
  --va-space-5: 2rem;

  /* Surfaces & borders */
  --va-surface: var(--bs-card-bg);
  --va-surface-subtle: rgba(var(--bs-secondary-rgb), 0.12);
  --va-border-soft: var(--bs-border);
  --va-border-strong: rgba(var(--bs-dark-rgb), 0.22);

  /* Shadows & overlays */
  --va-shadow-sm: 0 10px 30px rgba(var(--bs-dark-rgb), 0.1);
  --va-shadow-lg: 0 24px 60px rgba(var(--bs-dark-rgb), 0.18);
  --va-overlay: rgba(var(--bs-dark-rgb), 0.45);
  /* Coming-soon watermark: light overlay so content remains visible; not a blocking overlay */
  --va-coming-soon-overlay: rgba(var(--bs-light-rgb), 0.25);
  --va-coming-soon-label: rgba(var(--bs-body-color-rgb), 0.3);

  /* Components */
  --va-card-radius: var(--bs-border-radius-lg);
  --va-card-border-color: rgba(var(--bs-dark-rgb), 0.16);
  --va-card-hover-shadow: 0 18px 42px rgba(var(--bs-dark-rgb), 0.2);
  --va-card-padding: 1.25rem;
  --va-selection-border: 1px solid var(--bs-primary);
  --va-selection-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.18);
  --va-status-badge-radius: 999px;
  --va-status-badge-spacing: 0.35rem 0.875rem;
  --va-metric-radius: 0.75rem;
  --va-metric-shadow: inset 0 0 0 1px rgba(var(--bs-dark-rgb), 0.08);
  --va-storybook-bg: var(--bs-body-bg);
  --va-stepper-accent: var(--bs-primary);
  --va-stepper-muted: var(--bs-muted-foreground);

  /* KPI cards */
  --va-kpi-card-max: 320px;
  --va-kpi-card-max-compact: 260px;
  --va-kpi-gap: 1rem;
  --va-kpi-gap-compact: 0.75rem;

  /* Atmospherics */
  --va-grid-color: rgba(var(--bs-secondary-rgb), 0.28);
  --va-grid-spacing: 2rem;
  --va-glow-color: rgba(var(--bs-primary-rgb), 0.16);
  --va-glow-size: 24rem;
}