:root {
    /* Colores principales (Inspirados en el rojo del logo y blanco) */
    --color-primary: #e61a23;          /* El rojo puro y deportivo de la 'M' y 'Consignaciones' */
    --color-primary-dark: #b30f16;     /* Rojo oscuro para estados hover */
    --color-primary-light: #ffccd0;    /* Un rosa/rojo muy suave para fondos ligeros o alertas */
    --color-primary-darkest: #4a0508;  /* Rojo casi negro para contrastes profundos */
    
    /* Colores de fondo (Fondo negro sólido y variantes oscuras limpias) */
    --bg-primary: #0b0c0d;             /* El negro puro del fondo del logo */
    --bg-secondary: #17191c;           /* Gris muy oscuro para secciones */
    --bg-tertiary: #222529;            /* Gris oscuro intermedio */
    --bg-card: #1c1e22;                /* Gris perfecto para tarjetas que resalten sobre el fondo */
    
    /* Colores de texto (Basados en el blanco puro de la 'A' y contrastes) */
    --text-primary: #ffffff;           /* Blanco puro como la 'A' y parte de la bandera */
    --text-secondary: #e0e0e0;         /* Gris claro para textos secundarios */
    --text-muted: #a0a5ad;             /* Gris neutro para textos menos importantes */
    
    /* Colores de acento */
    --accent-whatsapp: #25d366;
    --accent-success: #2e7d32;
    
    /* Fuentes */
    --font-primary: 'Hanken Grotesk', 'Segoe UI', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Bordes (Cambiados de marrón a grises/blancos sutiles) */
    --border-color: rgba(255, 255, 255, 0.15);
    --border-color-light: rgba(255, 255, 255, 0.08);
    --border-color-lighter: rgba(255, 255, 255, 0.04);
    
    /* Sombras (Actualizadas al nuevo rojo y negro) */
    --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.7);
    --shadow-hover: 0 8px 25px rgba(230, 26, 35, 0.2); /* Brillo sutil con el nuevo rojo */
    --shadow-fab: 0 8px 30px rgba(37, 211, 102, 0.4);
    
    /* Spacing (breakpoints) */
    --container-max: 1280px;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
    
    /* Transiciones */
    --transition-default: 0.3s ease;
    --transition-slow: 0.7s ease;
    --transition-slower: 10s ease;
    
    /* Z-index */
    --z-fab: 40;
    --z-header: 50;
    --z-modal: 2000;

    /* Scrollbar */
    --scrollbar-width: 5px;
    --scrollbar-track: #0b0c0d;
    --scrollbar-thumb: #e61a23;        /* El scrollbar ahora hace juego con el rojo principal */
    --scrollbar-radius: 10px;
    
    /* Badges */
    --badge-nuevo-bg: #e61a23;
    --badge-nuevo-text: #ffffff;       /* Texto blanco sobre el badge rojo para máxima legibilidad */
    --badge-disponible-bg: #2e7d32;
    --badge-disponible-text: white;
}