/* Colors CSS - Alle Farben als CSS Custom Properties */

:root {
    /* Primary Colors */
    --color-primary: #007bff;
    --color-primary-dark: #0056b3;
    --color-primary-light: #66b3ff;
    
    /* Background Colors */
    --color-background: #ffffff;
    --color-background-secondary: #ffffff;
    --color-background-tertiary: #ffffff;
    
    /* Text Colors */
    --color-text-primary: #000000;
    --color-text-secondary: #000000;
    --color-text-tertiary: #000000;
    --color-text-inverse: #ffffff;
    
    /* Border Colors */
    --color-border: #000000;
    --color-border-light: #000000;
    --color-border-dark: #000000;
    
    /* Status Colors */
    --color-success: #28a745;
    --color-success-light: #d4edda;
    --color-success-dark: #155724;
    --color-error: #dc3545;
    --color-error-light: #f8d7da;
    --color-error-dark: #721c24;
    --color-warning: #ffc107;
    --color-warning-light: #fff3cd;
    --color-warning-dark: #856404;
    --color-info: #17a2b8;
    --color-info-light: #d1ecf1;
    --color-info-dark: #0c5460;
    
    /* Link Colors */
    --color-link: #007bff;
    --color-link-hover: #0056b3;
    --color-link-visited: #6f42c1;
    
    /* Headline Gradient Colors */
    --color-headline-gradient-start: #007bff;
    --color-headline-gradient-middle: #0056b3;
    --color-headline-gradient-end: #6f42c1;
    
    /* Button Gradient Colors */
    --color-button-gradient-start: #0066ff;
    --color-button-gradient-middle: #0044cc;
    --color-button-gradient-end: #8b00ff;
    --color-button-gradient-hover-start: #0052e6;
    --color-button-gradient-hover-middle: #0033aa;
    --color-button-gradient-hover-end: #7a00e6;
    
    /* Button Colors */
    --color-button-primary: #007bff;
    --color-button-primary-hover: #0056b3;
    --color-button-primary-text: #ffffff;
    --color-button-secondary: #1a1a1a;
    --color-button-secondary-hover: #000000;
    --color-button-secondary-text: #ffffff;
    --color-button-delete: #dc3545;
    --color-button-delete-hover: #c82333;
    --color-button-delete-text: #ffffff;
}

/* Dark Mode Colors */
@media (prefers-color-scheme: dark) {
    :root {
        /* Primary Colors */
        --color-primary: #4dabf7;
        --color-primary-dark: #339af0;
        --color-primary-light: #74c0fc;
        
        /* Background Colors */
        --color-background: #0a0a0a;
        --color-background-secondary: #0a0a0a;
        --color-background-tertiary: #0a0a0a;
        
        /* Text Colors */
        --color-text-primary: #ffffff;
        --color-text-secondary: #ffffff;
        --color-text-tertiary: #ffffff;
        --color-text-inverse: #0a0a0a;
        
        /* Border Colors */
        --color-border: #ffffff;
        --color-border-light: #ffffff;
        --color-border-dark: #ffffff;
        
        /* Status Colors */
        --color-success: #51cf66;
        --color-success-light: #2b8e3e;
        --color-success-dark: #1e6b2a;
        --color-error: #ff6b6b;
        --color-error-light: #c92a2a;
        --color-error-dark: #a61e1e;
        --color-warning: #ffd43b;
        --color-warning-light: #f59f00;
        --color-warning-dark: #d97706;
        --color-info: #4dabf7;
        --color-info-light: #1971c2;
        --color-info-dark: #1864ab;
        
        /* Link Colors */
        --color-link: #4dabf7;
        --color-link-hover: #74c0fc;
        --color-link-visited: #9775fa;
        
        /* Headline Gradient Colors */
        --color-headline-gradient-start: #4dabf7;
        --color-headline-gradient-middle: #339af0;
        --color-headline-gradient-end: #9775fa;
        
        /* Button Gradient Colors */
        --color-button-gradient-start: #4dabf7;
        --color-button-gradient-middle: #339af0;
        --color-button-gradient-end: #9775fa;
        --color-button-gradient-hover-start: #74c0fc;
        --color-button-gradient-hover-middle: #4dabf7;
        --color-button-gradient-hover-end: #b197fc;
        
        /* Button Colors */
        --color-button-primary: #4dabf7;
        --color-button-primary-hover: #74c0fc;
        --color-button-primary-text: #1a1a1a;
        --color-button-secondary: #1a1a1a;
        --color-button-secondary-hover: #0a0a0a;
        --color-button-secondary-text: #ffffff;
        --color-button-delete: #ff6b6b;
        --color-button-delete-hover: #ff8787;
        --color-button-delete-text: #ffffff;
    }
}