/**
 * Crash Music - Variables CSS
 * 
 * Este archivo contiene las variables CSS generales para el plugin Crash Music.
 * Estas variables se pueden utilizar en todos los archivos CSS del proyecto.
 */

:root {
    /* Colores principales */
    --cm-primary-color: #2A2F7B;
    --cm-secondary-color: #2ecc71;
    --cm-accent-color: #E76C90;
    --cm-dark-color: #2c3e50;
    --cm-light-color: #ecf0f1;
    
    /* Colores de texto */
    --cm-text-color: #000000;
    --cm-text-light: #ffffff;
    --cm-text-muted: #7f8c8d;
    
    /* Colores de fondo */
    --cm-bg-color: #ffffff;
    --cm-bg-light: #f5f5f5;
    --cm-bg-dark: #2c3e50;
    
    /* Colores de estado */
    --cm-success-color: #2ecc71;
    --cm-warning-color: #f39c12;
    --cm-error-color: #e74c3c;
    --cm-info-color: #3498db;
    
    /* Colores de accesibilidad */
    --cm-accessibility-color: #9b59b6;
    
    /* Tipografía */
    --cm-font-family: 'Roboto', sans-serif;
    --cm-font-size-base: 16px;
    --cm-font-size-small: 14px;
    --cm-font-size-large: 18px;
    --cm-font-size-xlarge: 24px;
    --cm-font-size-xxlarge: 32px;
    --cm-line-height: 1.5;
    
    /* Espaciado */
    --cm-spacing-xs: 0.25rem;
    --cm-spacing-sm: 0.5rem;
    --cm-spacing-md: 1rem;
    --cm-spacing-lg: 1.5rem;
    --cm-spacing-xl: 2rem;
    --cm-spacing-xxl: 3rem;
    
    /* Bordes */
    --cm-border-radius-sm: 4px;
    --cm-border-radius-md: 8px;
    --cm-border-radius-lg: 16px;
    --cm-border-color: #dddddd;
    --cm-border-width: 1px;
    
    /* Sombras */
    --cm-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --cm-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --cm-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    
    /* Transiciones */
    --cm-transition-fast: 0.2s ease;
    --cm-transition-normal: 0.3s ease;
    --cm-transition-slow: 0.5s ease;
    
    /* Z-index */
    --cm-z-index-dropdown: 1000;
    --cm-z-index-sticky: 1020;
    --cm-z-index-fixed: 1030;
    --cm-z-index-modal-backdrop: 1040;
    --cm-z-index-modal: 1050;
    --cm-z-index-popover: 1060;
    --cm-z-index-tooltip: 1070;
    
    /* Breakpoints */
    --cm-breakpoint-xs: 0;
    --cm-breakpoint-sm: 576px;
    --cm-breakpoint-md: 768px;
    --cm-breakpoint-lg: 992px;
    --cm-breakpoint-xl: 1200px;
    --cm-breakpoint-xxl: 1400px;
    
    /* Contenedores */
    --cm-container-padding: var(--cm-spacing-md);
    --cm-container-max-width: 1200px;
    
    /* Botones */
    --cm-button-padding: calc(var(--cm-spacing-md) * 0.7) var(--cm-spacing-xl);
    --cm-button-border-radius: var(--cm-border-radius-md);
    --cm-button-font-weight: 500;
    
    /* Inputs */
    --cm-input-padding: var(--cm-spacing-sm) var(--cm-spacing-md);
    --cm-input-border-radius: var(--cm-border-radius-md);
    --cm-input-border-color: var(--cm-border-color);
    
    /* Mapas */
    --cm-map-control-size: 40px;
    --cm-map-control-margin: var(--cm-spacing-sm);
    --cm-map-control-border-radius: var(--cm-border-radius-md);
    --cm-map-control-bg-color: var(--cm-bg-color);
    --cm-map-control-border-color: var(--cm-border-color);
    
    /* Festivales */
    --cm-festival-card-border-radius: var(--cm-border-radius-md);
    --cm-festival-card-shadow: var(--cm-shadow-md);
    --cm-festival-card-padding: var(--cm-spacing-md);
    --cm-festival-card-margin: var(--cm-spacing-md);
    
    /* Iconos */
    --cm-icon-size-sm: 16px;
    --cm-icon-size-md: 24px;
    --cm-icon-size-lg: 32px;
    --cm-icon-size-xl: 48px;
}