/* Base Styles - Global Variables and Reset */
:root {
    /* === BRAND COLOR SYSTEM === */
    
    /* Primary Brand Colors */
    --primary-purple: #8A3AB9;
    --primary-purple-light: #B668D9;
    --primary-purple-dark: #663189;
    --primary-purple-50: rgba(138, 58, 185, 0.05);
    --primary-purple-100: rgba(138, 58, 185, 0.1);
    --primary-purple-200: rgba(138, 58, 185, 0.2);
    --primary-purple-300: rgba(138, 58, 185, 0.3);
    --primary-purple-400: rgba(138, 58, 185, 0.4);
    
    /* Secondary Brand Colors */
    --secondary-pink: #FF6EC7;
    --secondary-pink-50: rgba(255, 110, 199, 0.05);
    --secondary-pink-100: rgba(255, 110, 199, 0.1);
    --secondary-pink-200: rgba(255, 110, 199, 0.2);
    
    /* Accent Colors */
    --accent-green: #00C48C;
    --accent-green-light: #33D4A7;
    --accent-green-dark: #00A876;
    --accent-green-50: rgba(0, 196, 140, 0.05);
    --accent-green-100: rgba(0, 196, 140, 0.1);
    --accent-green-200: rgba(0, 196, 140, 0.2);
    --accent-green-300: rgba(0, 196, 140, 0.3);
    --accent-green-400: rgba(0, 196, 140, 0.4);
    
    --accent-yellow: #FFC107;
    --accent-yellow-light: #FFD54F;
    --accent-yellow-dark: #FF8F00;
    --accent-yellow-50: rgba(255, 193, 7, 0.05);
    --accent-yellow-100: rgba(255, 193, 7, 0.1);
    --accent-yellow-200: rgba(255, 193, 7, 0.2);
    
    /* Gradient Combinations */
    --gradient-primary: linear-gradient(135deg, var(--secondary-pink), var(--primary-purple));
    --gradient-success: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
    --gradient-warning: linear-gradient(135deg, var(--accent-yellow), var(--accent-yellow-dark));
    --gradient-background: linear-gradient(135deg, var(--bg-light), var(--bg-white));
    
    /* === NEUTRAL COLOR SYSTEM === */
    
    /* Text Colors */
    --text-dark: #111111;
    --text-medium: #333333;
    --text-light: #666666;
    --text-muted: #999999;
    --text-white: #FFFFFF;
    
    /* Background Colors */
    --bg-white: #FFFFFF;
    --bg-light: #F8FAFC;
    --bg-gray-50: #F1F5F9;
    --bg-gray-100: #E2E8F0;
    --bg-purple-light: #F9F5FF;
    
    /* Border Colors */
    --border-light: #E6E6E6;
    --border-medium: #D1D5DB;
    --border-dark: #9CA3AF;
    
    /* === SEMANTIC COLORS === */
    
    /* States */
    --state-success: var(--accent-green);
    --state-warning: var(--accent-yellow);
    --state-error: #EF4444;
    --state-info: var(--primary-purple);
    
    /* State Backgrounds */
    --bg-success: var(--accent-green-50);
    --bg-warning: var(--accent-yellow-50);
    --bg-error: rgba(239, 68, 68, 0.05);
    --bg-info: var(--primary-purple-50);
    
    /* === SHADOW SYSTEM === */
    
    /* Standard Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 35px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.2);
    
    /* Brand Shadows */
    --shadow-purple: 0 4px 15px var(--primary-purple-300);
    --shadow-purple-hover: 0 6px 20px var(--primary-purple-400);
    --shadow-green: 0 4px 15px var(--accent-green-300);
    
    /* === LEGACY VARIABLES (for backward compatibility) === */
    --primary-light: var(--bg-purple-light);
    --gradient-start: var(--secondary-pink);
    --gradient-end: var(--primary-purple);
    --trust-green: var(--accent-green);
    --warning-yellow: var(--accent-yellow);
    --bg-gray: var(--bg-light);
    
    /* === LAYOUT VARIABLES === */
    
    /* Spacing */
    --container-max-width: 1200px;
    --section-padding: 80px 0;
    --mobile-padding: 40px 0;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 25px;
    --radius-full: 50px;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-h1: 48px;
    --font-size-h2: 36px;
    --font-size-h3: 24px;
    --font-size-body: 16px;
    --line-height-heading: 1.2;
    --line-height-body: 1.6;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--text-dark);
    line-height: var(--line-height-body);
    background-color: var(--bg-white);
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-size: var(--font-size-h2);
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
    line-height: var(--line-height-heading);
}

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

.cta-button {
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 600;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-purple);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-purple-hover);
}

.cta-button.secondary {
    background: var(--bg-white);
    color: var(--primary-purple);
    border: 2px solid var(--primary-purple);
    box-shadow: var(--shadow-md);
}

.cta-button.secondary:hover {
    background: var(--primary-purple);
    color: var(--text-white);
    box-shadow: var(--shadow-purple);
}

.cta-button.success {
    background: var(--gradient-success);
    box-shadow: var(--shadow-green);
}

.cta-button.warning {
    background: var(--gradient-warning);
    color: var(--text-dark);
}

.cta-button:active {
    transform: translateY(0);
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mb-2 {
    margin-bottom: 16px;
}

.mb-3 {
    margin-bottom: 24px;
}

.mb-4 {
    margin-bottom: 32px;
}

.smooth-scroll {
    scroll-behavior: smooth;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .smooth-scroll {
        scroll-behavior: auto;
    }
}

/* Print Styles */
@media print {
    .cta-button {
        display: none;
    }
}