/* Variables CSS del tema Grupo Mexico */

:root {    
    /* Colores de texto */
    --text-primary: #4B5563;
    --text-black: #000000;
    --text-navbar: #333333;
    --text-white: #ffffff;
    --text-footer-secondary: #D1D5DB;
    --text-dark-blue: #1F2937;
    --text-gray: #6B7280;
    --text-accent: #9E0505;
    --text-accent-hover: #800505;
    
    /* Colores de fondo */
    --bg-primary: #ffffff;
    --bg-secondary: #9E0505;
    --bg-secondary-hover: #800505;
    --bg-gray: #4B5563;
    --bg-white: #ffffff;

    /* Colores de border */
    --border-primary: #E5E7EB;
    --border-light: #D1D5DB;
    --border-gray: #374151;

    /* Colores de shadow */
    --shadow-primary: #0000001A;

    /* Colores de categorías de noticias */
    --category-innovacion: #1E40AF;
    --category-sustentabilidad: #166534;
    --category-seguridad: #9A3412;
    --category-default: #95a5a6;

    /* Padding */
    --padding-xs: 15px;
    --padding-sm: 20px;
    --padding-md: 40px;

    /* Layout de dos columnas */
    --layout-main-width: 74%;
    --layout-sidebar-width: calc(100% - var(--layout-main-width) - 32px);
    --layout-gap: 32px;

    /* Breakpoints (para uso en JavaScript) */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 767px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1280px;
    --breakpoint-xl: 1920px;
}

/* Clases de utilidad para colores */
.text-primary { color: var(--primary-color) !important; }