/* Variables CSS - Paleta de colores y valores comunes */
:root {
    /* Colores principales */
    --color-primary-dark: #0f3460;
    --color-primary-darker: #16213e;
    --color-primary-darkest: #1a1a2e;
    --color-accent-gold: #d4af37;
    --color-accent-gold-light: #f0d78c;
    
    /* Colores de texto */
    --color-text-primary: #333;
    --color-text-secondary: #555;
    --color-text-tertiary: #666;
    --color-text-light: #f0f0f0;
    --color-text-muted: #999;
    
    /* Colores de fondo */
    --color-bg-white: #ffffff;
    --color-bg-light: #f9f9f9;
    --color-bg-lighter: #f0f0f0;
    --color-bg-gray: #e0e0e0;
    --color-bg-blue-light: #e8f4f8;
    --color-bg-gold-light: rgba(212, 175, 55, 0.1);
    
    /* Colores de acento */
    --color-accent-blue: #2196F3;
    
    /* Tipografía */
    --font-family-primary: 'Garamond', 'Georgia', serif;
    
    /* Espaciado */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    
    /* Bordes */
    --border-radius-sm: 5px;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --border-radius-pill: 20px;
    
    /* Sombras */
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.2);
    --shadow-md: 0 5px 20px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.3);
    --shadow-hover: 0 5px 15px rgba(0,0,0,0.1);
    
    /* Transiciones */
    --transition-base: all 0.3s ease;
    
    /* Anchos */
    --container-width-sm: 600px;
    --container-width-md: 900px;
}