/* CSS Custom Properties / Variables */
:root {
    /* Colors */
    --primary: #1DD3B0;
    /*#5AAA95;*/
    --secondary: #243E36;
    --accent: #AC92A6;
    /*#FAF33E;*/
    --light: #FAF33E;
    --white: #ffffff;
    --gray-100: #f8fafc;
    --gray-200: #e2e8f0;
    --gray-600: #475569;
    --dark: #243E36;
    
    /* Typography */
    --font-primary: 'DM Sans', sans-serif;
    --font-display: 'Vampiro One', cursive;
    --font-secondary: 'Source Sans Pro', sans-serif;
    
    /* Spacing */
    --container-max-width: 1400px;
    --container-padding: 3rem;
    --section-padding: 100px 0;
    --section-padding-mobile: 80px 0;
    
    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --animation-slideup: slideUp 1s ease-out forwards;
    --animation-slidefromleft: slideFromLeft 1s ease-out forwards;
    
    /* Shadows */
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 20px rgba(36, 62, 54, 0.08);
    --shadow-heavy: 0 20px 40px rgba(36, 62, 54, 0.12);
    --shadow-banner: 0 -4px 20px rgba(36, 62, 54, 0.1);
    
    /* Border Radius */
    --radius-small: 3px;
    --radius-medium: 6px;
    --radius-large: 16px;
    --radius-xl: 20px;
}