/**
 * CSS Custom Properties für Farben
 * 
 * Diese Datei definiert alle Farben der Website als CSS Custom Properties.
 * Alle anderen CSS-Dateien müssen diese Farben verwenden.
 * 
 * Author: Fabian Rossbacher
 * LinkedIn: https://www.linkedin.com/in/fabian-rossbacher/
 */

:root {
    /* Hauptfarben basierend auf Logo */
    --color-primary: #f39324;
    --color-primary-hover: #e0851f;
    --color-secondary: #1a777b;
    --color-secondary-hover: #156a6e;
    
    /* Hintergrundfarben - Light Design */
    --color-background-primary: #ffffff;
    --color-background-secondary: #f8f9fa;
    --color-background-tertiary: #e9ecef;
    
    /* Textfarben - Light Design */
    --color-text-primary: #333333;
    --color-text-secondary: #495057;
    --color-text-muted: #6c757d;
    
    /* Akzentfarben */
    --color-accent: #f39324;
    --color-accent-hover: #e0851f;
    
    /* Statusfarben */
    --color-success: #28a745;
    --color-success-hover: #218838;
    --color-success-background: #d4edda;
    --color-success-text: #155724;
    
    --color-warning: #ffc107;
    --color-warning-hover: #e0a800;
    --color-warning-background: #fff3cd;
    --color-warning-text: #856404;
    
    --color-error: #dc3545;
    --color-error-hover: #c82333;
    --color-error-background: #f8d7da;
    --color-error-text: #721c24;
    
    --color-info: #17a2b8;
    --color-info-hover: #138496;
    --color-info-background: #d1ecf1;
    --color-info-text: #0c5460;
    
    /* Spezielle Farben */
    --color-tip: #17a2b8;
    --color-tip-background: #d1ecf1;
    --color-tip-text: #0c5460;
    
    /* Hover-Effekte - Light Design */
    --color-hover-background: #f8f9fa;
    --color-hover-text: #333333;
    
    /* Rahmen und Trennlinien - Light Design */
    --color-border: #dee2e6;
    --color-border-light: #e9ecef;
    --color-border-dark: #ced4da;
    
    /* Schatten */
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-shadow-light: rgba(0, 0, 0, 0.1);
    --color-shadow-dark: rgba(0, 0, 0, 0.5);
    
    /* Weiß und Schwarz */
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* Grautöne */
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    
    /* Widget-Box Farben */
    --color-highlight-bg: #e8f4fd;
    --color-info-bg: #f0f8ff;
    --color-success-bg: #e8f5e8;
    --color-warning-bg: #fff3cd;
    --color-quote-bg: #f8f9fa;
    --color-navigation-bg: #f8f9fa;
    --color-code-bg: #f8f9fa;
    --color-details-header: #e9ecef;
    --color-details-header-hover: #dee2e6;
    --color-details-content: #ffffff;
    
    /* Zusätzliche Widget-Farben */
    --color-info-border: #b3d9ff;
    --color-warning-border: #ffeaa7;
    --color-success-border: #c3e6cb;
    --color-quote-border: #e9ecef;
    --color-code-border: #e9ecef;
    --color-code-text: #495057;
    
    /* Tabellen-Farben */
    --color-table-bg: #ffffff;
    --color-table-header-bg: #f8f9fa;
    --color-table-border: #dee2e6;
    --color-table-hover: #f8f9fa;
    
    /* Listen-Farben */
    --color-list-border: #e9ecef;
    
    /* Sidebar-Farben */
    --color-sidebar-bg: #f8f9fa;
    --color-sidebar-headline: #495057;
    
    /* Link-Farben */
    --color-link: #f39324;
    --color-link-hover: #e0851f;
    --color-link-active: #1a777b;
    
    /* Headline-Farben */
    --color-headline-h1: #f39324;
    --color-headline-h2: #1a777b;
    --color-headline-h3: #495057;
    --color-headline-h4: #6c757d;
    
    /* Text-Farben */
    --color-text: #495057;
}