/**
 * Central Color System - Hetzner-inspired Design
 * White, Grey, and Red color scheme
 */

:root {
    /* Primary Colors - Red Accents */
    --color-red-primary: #dc0019;
    --color-red-hover: #b80015;
    --color-red-light: #ffebed;
    --color-red-dark: #a00011;
    
    /* Background Colors - White & Light Grey */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f5f5;
    --color-bg-tertiary: #fafafa;
    --color-bg-panel: #ffffff;
    --color-bg-hover: #f9f9f9;
    --color-bg-selected: #f0f0f0;
    
    /* Text Colors - Dark for legibility */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #333333;
    --color-text-tertiary: #4d4d4d;
    --color-text-muted: #666666;
    --color-text-inverse: #ffffff;
    
    /* Border Colors */
    --color-border-light: #e5e5e5;
    --color-border-medium: #d0d0d0;
    --color-border-dark: #b3b3b3;
    --color-border-red: #dc0019;
    
    /* Status Colors - Grey/Red only */
    --color-success: #666666;
    --color-success-bg: #f5f5f5;
    --color-warning: #999999;
    --color-warning-bg: #f0f0f0;
    --color-error: #dc0019;
    --color-error-bg: #ffebed;
    --color-info: #666666;
    --color-info-bg: #f5f5f5;
    
    /* Interactive Elements */
    --color-link: #dc0019;
    --color-link-hover: #b80015;
    --color-button-primary: #dc0019;
    --color-button-primary-hover: #b80015;
    --color-button-primary-text: #ffffff;
    --color-button-secondary: #f5f5f5;
    --color-button-secondary-hover: #e5e5e5;
    --color-button-secondary-text: #1a1a1a;
    
    /* Sidebar Colors */
    --color-sidebar-bg: #ffffff;
    --color-sidebar-border: #e5e5e5;
    --color-sidebar-item-hover: #f5f5f5;
    --color-sidebar-item-active: #ffebed;
    --color-sidebar-item-active-text: #dc0019;
    --color-sidebar-text: #666666;
    --color-sidebar-text-active: #dc0019;
    
    /* Card/Panel Colors */
    --color-card-bg: #ffffff;
    --color-card-border: #e5e5e5;
    --color-card-shadow: rgba(0, 0, 0, 0.05);
    --color-card-hover-shadow: rgba(0, 0, 0, 0.1);
    
    /* Input Colors */
    --color-input-bg: #ffffff;
    --color-input-border: #d0d0d0;
    --color-input-border-focus: #dc0019;
    --color-input-text: #1a1a1a;
    --color-input-placeholder: #999999;
    
    /* Badge/Tag Colors - Grey/Red only */
    --color-badge-default: #f5f5f5;
    --color-badge-default-text: #333333;
    --color-badge-red: #ffebed;
    --color-badge-red-text: #dc0019;
    --color-badge-yellow: #f0f0f0;
    --color-badge-yellow-text: #666666;
    --color-badge-green: #e5e5e5;
    --color-badge-green-text: #333333;
    
    /* Notification Colors - Grey/Red only */
    --color-notification-warning: #f0f0f0;
    --color-notification-warning-border: #999999;
    --color-notification-warning-text: #333333;
    --color-notification-info: #f5f5f5;
    --color-notification-info-border: #666666;
    --color-notification-info-text: #333333;
    
    /* Map/Visualization Colors */
    --color-map-bg: #f5f5f5;
    --color-map-marker: #dc0019;
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Dark mode support (optional, for future use) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg-primary: #1a1a1a;
        --color-bg-secondary: #252525;
        --color-bg-tertiary: #2a2a2a;
        --color-text-primary: #ffffff;
        --color-text-secondary: #b3b3b3;
        --color-text-tertiary: #999999;
    }
}