/**
 * Design System V5.0 - PINK/MAGENTA Theme
 * 
 * Neues Farbschema basierend auf Masterplan
 * 
 * @package DATAsoft_Escort_Core
 * @version 5.0.5
 */

/* ===========================
   COLOR VARIABLES (PINK/MAGENTA)
   =========================== */

:root {
    /* Primary Colors */
    --color-primary: #E91E63;           /* Pink/Magenta */
    --color-primary-light: #F06292;     /* Light Pink */
    --color-primary-dark: #C2185B;      /* Dark Pink */
    --color-primary-gradient: linear-gradient(135deg, #E91E63 0%, #9C27B0 100%);
    
    /* Secondary Colors */
    --color-secondary: #9C27B0;         /* Lila */
    --color-secondary-light: #BA68C8;   /* Light Lila */
    --color-secondary-dark: #7B1FA2;    /* Dark Lila */
    
    /* Accent Colors */
    --color-accent: #FF5722;            /* Orange */
    --color-accent-light: #FF8A65;      /* Light Orange */
    --color-accent-dark: #E64A19;       /* Dark Orange */
    
    /* Status Colors */
    --color-success: #4CAF50;           /* Grün */
    --color-warning: #FFC107;           /* Gelb */
    --color-error: #F44336;             /* Rot */
    --color-info: #2196F3;              /* Blau */
    
    /* Neutral Colors */
    --color-background: #FAFAFA;        /* Hellgrau */
    --color-surface: #FFFFFF;           /* Weiß */
    --color-text: #212121;              /* Dunkelgrau */
    --color-text-secondary: #757575;    /* Grau */
    --color-border: #E0E0E0;            /* Border */
    --color-divider: #BDBDBD;           /* Divider */
    
    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-overlay-light: rgba(0, 0, 0, 0.3);
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.25);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* Typography */
    --font-heading: 'Montserrat', 'Poppins', sans-serif;
    --font-body: 'Open Sans', 'Inter', sans-serif;
    
    /* Font Sizes */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;
    
    /* Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    
    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ===========================
   RESPONSIVE BREAKPOINTS
   =========================== */

/* Mobile: < 768px */
@media (max-width: 767px) {
    :root {
        --text-3xl: 24px;
        --text-2xl: 20px;
        --text-xl: 18px;
        --text-base: 14px;
        --text-sm: 12px;
    }
}

/* Tablet: 768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --text-3xl: 28px;
        --text-2xl: 22px;
    }
}

/* ===========================
   UTILITY CLASSES
   =========================== */

/* Background Colors */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent) !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; }
.bg-surface { background-color: var(--color-surface) !important; }

/* Text Colors */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-error { color: var(--color-error) !important; }
.text-muted { color: var(--color-text-secondary) !important; }

/* Gradients */
.bg-gradient-primary {
    background: var(--color-primary-gradient) !important;
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%) !important;
}

/* Buttons */
.btn-primary {
    background: var(--color-primary-gradient);
    color: #fff;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(233, 30, 99, 0.4);
}

.btn-outline-primary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-outline-primary:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ===========================
   COMPONENT OVERRIDES
   =========================== */

/* Update existing components to use new colors */
.ds-header-v5 {
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.ds-logo-text {
    background: var(--color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ds-nav-menu a:hover {
    color: var(--color-primary);
}

.ds-user-icon:hover {
    color: var(--color-primary);
}

.ds-hero-overlay {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.8) 0%, rgba(156, 39, 176, 0.8) 100%);
}

.ds-search-btn,
.ds-filter-submit,
.ds-card-link {
    background: var(--color-primary-gradient);
}

.ds-search-btn:hover,
.ds-filter-submit:hover,
.ds-card-link:hover {
    box-shadow: 0 10px 20px rgba(233, 30, 99, 0.4);
}

.ds-badge-online {
    color: var(--color-error);
}

.ds-badge-verified {
    color: var(--color-success);
}

.ds-badge-premium {
    color: var(--color-accent);
}

.ds-badge-video {
    color: var(--color-primary);
}

/* ===========================
   DARK MODE (Optional)
   =========================== */

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #121212;
        --color-surface: #1E1E1E;
        --color-text: #FFFFFF;
        --color-text-secondary: #B0B0B0;
        --color-border: #333333;
    }
}