/* Corporate Design Farben und Design-Variablen
 * Zentrale Farbdefinitionen für TSYNQ
 */

:root {
  /* Primärfarben */
  --color-primary: #3b82f6;          /* blue-500 */
  --color-primary-light: #60a5fa;    /* blue-400 */
  --color-primary-dark: #2563eb;     /* blue-600 */
  
  /* Sekundärfarben */
  --color-secondary: #64748b;        /* slate-500 */
  --color-secondary-light: #94a3b8;  /* slate-400 */
  --color-secondary-dark: #475569;   /* slate-600 */
  
  /* Erfolg, Warnung, Fehler */
  --color-success: #10b981;          /* emerald-500 */
  --color-warning: #f59e0b;          /* amber-500 */
  --color-error: #ef4444;            /* red-500 */
  
  /* Neutrale Farben */
  --color-text: #1f2937;             /* gray-800 */
  --color-text-light: #6b7280;       /* gray-500 */
  --color-background: #f9fafb;       /* gray-50 */
  --color-card: #ffffff;             /* white */
  --color-border: #e5e7eb;           /* gray-200 */
  
  /* Dark Mode */
  --color-dark-text: #f9fafb;        /* gray-50 */
  --color-dark-text-light: #9ca3af;  /* gray-400 */
  --color-dark-background: #111827;  /* gray-900 */
  --color-dark-card: #1f2937;        /* gray-800 */
  --color-dark-border: #374151;      /* gray-700 */
  
  /* Abstände */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  
  /* Abrundungen */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;
  
  /* Schatten */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Tailwind-kompatible Utility-Klassen */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-error { background-color: var(--color-error) !important; }

.text-primary { color: var(--color-primary) !important; }
.text-primary-dark { color: var(--color-primary-dark) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-error { color: var(--color-error) !important; }

.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }

/* Dark Mode Überschreibungen automatisch mit Präfix */
@media (prefers-color-scheme: dark) {
  .dark\:bg-primary { background-color: var(--color-primary) !important; }
  .dark\:text-primary { color: var(--color-primary) !important; }
  .dark\:border-primary { border-color: var(--color-primary) !important; }
}