:root {
    /* Colors */
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --primary-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --success-color: #10b981;
    --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --error-color: #ef4444;
    --white: #ffffff;

    /* Light Mode Defaults */
    --bg-body: #ffffff;
    --text-dark: #1f2937;
    --text-gray: #6b7280;
    --text-light: #9ca3af;
    --bg-light: #f9fafb;
    --bg-header: rgba(255, 255, 255, 0.95);
    --bg-card-glass: rgba(255, 255, 255, 0.95);
    --bg-white: #ffffff;
    --bg-card: #ffffff;
    --border-color: #e5e7eb;
    --input-bg: #ffffff;
    --input-border: #d1d5db;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Spacing */
    --container-width: 1200px;
    --section-padding: 80px 20px;
}

/* Dark Mode Overrides */
body.dark-mode {
    --bg-body: #111827;
    --text-dark: #f3f4f6;
    --text-gray: #d1d5db;
    --text-light: #9ca3af;
    --bg-light: #111827;
    --bg-white: #374151;
    --bg-card: #1f2937;
    --border-color: #374151;
    --bg-header: rgba(17, 24, 39, 0.95);
    --bg-card-glass: rgba(31, 41, 55, 0.95);
    --input-bg: #374151;
    --input-border: #4b5563;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}