/* ============================================
   VARIABLES CSS - Sistema de Diseño
   ============================================ */

:root {
    /* Colores principales */
    --primary-green:rgba(74, 159, 216, 0.9); /*#00a000;*/
    --light-green: rgba(158, 177, 194, 0.9);/*#90EE90;*/
    --dark-blue: #1E3A5F;
    --gray-text: #814900;
    --light-gray: #f5f5f5;
    --white: #ffffff;
    --black: #000000;
    
    /* Espaciados */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;
    
    /* Border Radius */
    --border-radius-sm: 10px;
    --border-radius-md: 15px;
    --border-radius-lg: 20px;
    --border-radius-circle: 50%;
    
    /* Transiciones */
    --transition-fast: all 0.2s ease;
    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    
    /* Sombras */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.15);
    
    /* Tipografía */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 36px;
    --font-size-huge: 48px;
    
    /* Layout */
    --max-width-mobile: 428px;
    --bottom-nav-height: 70px;
}

/* Breakpoints para referencia
   Mobile: 320px - 767px
   Tablet: 768px - 1023px
   Desktop: 1024px+
*/