:root {
  /* Base */
  --ui-bg: #ffffff;
  --ui-fg: #1f2937;                /* slate-800 */
  --ui-bg-secondary: #f8fafc;      /* slate-50 */
  --ui-border: #e5e7eb;            /* slate-200 */
  --ui-radius: 10px;
  --ui-shadow: 0 10px 25px -5px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --ui-shadow-lg: 0 25px 50px -12px rgba(0,0,0,.25);

  /* Brand (aus deinem Logo) */
  --ui-primary: #007BFF;
  --ui-primary-hover: #0056b3;
  --ui-primary-contrast: #ffffff;
  --ui-primary-ring: rgba(0,123,255,.35);

  /* States (AA-Kontrast, dezente Tints) */
  --ui-success: #10b981;
  --ui-success-contrast: #064e3b;
  --ui-success-bg: #ecfdf5;
  --ui-success-border: #a7f3d0;

  --ui-warning: #f59e0b;
  --ui-warning-contrast: #78350f;
  --ui-warning-bg: #fffbeb;
  --ui-warning-border: #fde68a;

  --ui-error: #ef4444;
  --ui-error-contrast: #7f1d1d;
  --ui-error-bg: #fef2f2;
  --ui-error-border: #fecaca;

  --ui-info: #06b6d4;
  --ui-info-contrast: #0c4a6e;
  --ui-info-bg: #f0f9ff;
  --ui-info-border: #bae6fd;

  /* Links */
  --ui-link: var(--ui-primary);
  --ui-link-hover: var(--ui-primary-hover);
}

/*@media (prefers-color-scheme: dark) {
    :root {
        --ui-bg: #111827;
        --ui-fg: #f9fafb;
        --ui-bg-secondary: #1f2937;
        --ui-border: #374151;
        --ui-success-bg: #064e3b;
        --ui-warning-bg: #451a03;
        --ui-error-bg: #7f1d1d;
        --ui-info-bg: #164e63;
    }
}*/