/**
 * CockpitOS Theme Styles
 * 
 * Fallback-Theme-Styles falls Dashboard-API nicht verfügbar
 */

:root {
  /* Primary Theme Colors */
  --cockpit-primary: #007cba;
  --cockpit-secondary: #005a87;
  --cockpit-accent: #00a0d2;
  
  /* Background Colors */
  --cockpit-background: #ffffff;
  --cockpit-surface: #f8f9fa;
  --cockpit-surface-alt: #e9ecef;
  
  /* Text Colors */
  --cockpit-text: #333333;
  --cockpit-text-light: #666666;
  --cockpit-text-muted: #999999;
  
  /* Border Colors */
  --cockpit-border: #e0e0e0;
  --cockpit-border-light: #f0f0f0;
  
  /* Status Colors */
  --cockpit-success: #28a745;
  --cockpit-warning: #ffc107;
  --cockpit-error: #dc3545;
  --cockpit-info: #17a2b8;
  
  /* Typography */
  --cockpit-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cockpit-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Font Sizes */
  --cockpit-font-size-xs: 12px;
  --cockpit-font-size-sm: 14px;
  --cockpit-font-size-md: 16px;
  --cockpit-font-size-lg: 20px;
  --cockpit-font-size-xl: 24px;
  --cockpit-font-size-2xl: 32px;
  
  /* Spacing */
  --cockpit-spacing-xs: 4px;
  --cockpit-spacing-sm: 8px;
  --cockpit-spacing-md: 16px;
  --cockpit-spacing-lg: 24px;
  --cockpit-spacing-xl: 32px;
  --cockpit-spacing-2xl: 48px;
  
  /* Border Radius */
  --cockpit-radius-sm: 4px;
  --cockpit-radius-md: 8px;
  --cockpit-radius-lg: 12px;
  --cockpit-radius-xl: 16px;
  
  /* Shadows */
  --cockpit-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --cockpit-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --cockpit-shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
  --cockpit-shadow-xl: 0 20px 40px rgba(0,0,0,0.1);
  
  /* Transitions */
  --cockpit-transition-fast: 0.15s ease;
  --cockpit-transition-normal: 0.2s ease;
  --cockpit-transition-slow: 0.3s ease;
}

/* Theme-specific overrides */
.cockpit-os-themed {
  color: var(--cockpit-text);
  font-family: var(--cockpit-font-body);
}

.cockpit-os-themed h1,
.cockpit-os-themed h2,
.cockpit-os-themed h3,
.cockpit-os-themed h4,
.cockpit-os-themed h5,
.cockpit-os-themed h6 {
  font-family: var(--cockpit-font-heading);
  color: var(--cockpit-text);
}

.cockpit-os-themed a {
  color: var(--cockpit-primary);
  transition: var(--cockpit-transition-fast);
}

.cockpit-os-themed a:hover {
  color: var(--cockpit-secondary);
}