/* ================================
   CSS Variables
   ================================ */

:root {
    /* Colors - Light Theme */
    --primary-color: #00b96b;
    --primary-hover: #009955;
    --primary-light: rgba(0, 185, 107, 0.1);
    --secondary-color: #ff3366;
    --accent-blue: #0099ff;
    --accent-orange: #ff9900;
    --accent-purple: #9933ff;
    
    /* Backgrounds - Light */
    --bg-light: #ffffff;
    --bg-light-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f7fa;
    --bg-gray: #e9ecef;
    
    /* Text Colors */
    --text-dark: #1a1a1a;
    --text-gray: #6c757d;
    --text-light-gray: #adb5bd;
    
    /* Dark theme vars for compatibility */
    --bg-dark: #1a1a1a;
    --bg-dark-secondary: #f8f9fa;
    --text-white: #1a1a1a;
    
    --border-color: #e9ecef;
    --border-radius: 8px;
    --border-radius-lg: 16px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.2);
    --shadow-primary: 0 8px 25px rgba(0, 185, 107, 0.25);
    
    /* Typography */
    --font-main: 'Poppins', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Spacing */
    --container-width: 1320px;
    --section-padding: 80px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better text selection */
::selection {
    background: var(--primary-color);
    color: #ffffff;
}

::-moz-selection {
    background: var(--primary-color);
    color: #ffffff;
}