:root {
  // Spacing (8px-Grid)
  --tw-space-1: 4px;
  --tw-space-2: 8px;
  --tw-space-3: 12px;
  --tw-space-4: 16px;
  --tw-space-6: 24px;
  --tw-space-8: 32px;

  // Radius
  --tw-radius-sm: 8px;
  --tw-radius-md: 12px;
  --tw-radius-lg: 16px;

  // Elevation (ersetzt die bisher wiederholte box-shadow-Deklaration)
  --tw-elevation-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.1);
  --tw-elevation-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.1);

  // Semantische Saldo-Farben (fintech-modern: gedämpftes Grün/Rot statt Signalfarben)
  --tw-balance-positive: #1b8a5a;
  --tw-balance-negative: #c4351c;
  --tw-balance-neutral: #64748b;

  // Flächen
  --tw-surface-bg: #f7f8fa;
  --tw-surface-card: #ffffff;

  // Angular Material's own app-level background variable should follow our token
  --mat-app-background-color: var(--tw-surface-bg);
}
