/* =========================================================
   🎨 COLORS.CSS - DESIGN TOKENS (MBC CONSULTORA)
   =========================================================
   Este archivo centraliza TODOS los colores del proyecto.

   ✔ Permite cambiar el tema completo desde un solo lugar
   ✔ Reutilizable en múltiples proyectos
   ✔ Compatible con Bootstrap o cualquier framework

   USO:
   - Siempre usar var(--color-xxx)
   - NO usar colores directos (#fff, #000, etc.)
   ========================================================= */

:root {
    /* ===============================
       🎯 COLORES PRINCIPALES
       =============================== */
    --color-primary: #636363; /* Gris oscuro corporativo */
    --color-secondary: #5a5a5a; /* Gris medio */
    --color-accent: #C6C6C6; /* Gris claro (fondos) */
    /* ===============================
       📝 TEXTO
       =============================== */
    --color-text: #333333; /* Texto general */
    --color-text-dark: #111111; /* Títulos */
    --color-text-light: #ffffff; /* Texto sobre fondo oscuro */
    --color-text-muted: #555555; /* Subtítulos */

    --color-text-SubTitulos: #CD3B4D;
    /* ===============================
       🧱 FONDOS
       =============================== */

    --color-bg-main: #ffffff; /* Fondo principal */
    --color-bg-alt: #f8f9fa; /* Fondo alternativo */
    --color-bg-section: #C6C6C6; /* Secciones como valores */
    /* ===============================
       🔲 BORDES / DETALLES
       =============================== */
    --color-border: #dee2e6;
    --color-divider: #000000;
    /* ===============================
       ✨ HOVER / INTERACCIONES
       =============================== */
    --color-hover-dark: #636363;
    --color-hover-light: #ffffff;
}