/* ==========================================================================
   PERSINOVAA - VARIABLES.CSS
   Sistema de Diseño: Paleta de Colores, Tipografía y Utilidades
   Agencia: Web Total México
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       1. PALETA DE COLORES PRINCIPAL (Minimalista: Azul, Negro, Blanco)
       ---------------------------------------------------------------------- */
    
    /* Tonos Azules (Confianza, Tecnología, Premium) */
    --color-primary: #0056b3;       /* Azul principal corporativo */
    --color-primary-dark: #003d82;  /* Azul oscuro (para estados hover y focus) */
    --color-accent: #00a8ff;        /* Azul brillante (para detalles y acentos visuales) */
    
    /* Tonos Neutros y Escala de Grises */
    --color-black: #0a0a0a;         /* Negro profundo, no puro (para evitar fatiga visual) */
    --color-white: #ffffff;         /* Blanco puro */
    
    --color-light: #f8f9fa;         /* Fondo gris súper claro (para secciones alternas) */
    --color-gray-light: #e9ecef;    /* Gris claro (bordes, inputs, placeholders) */
    --color-gray-dark: #6c757d;     /* Gris oscuro (textos secundarios, descripciones) */

    /* ----------------------------------------------------------------------
       2. ASIGNACIÓN FUNCIONAL DE COLORES
       ---------------------------------------------------------------------- */
    --bg-main: var(--color-white);
    --text-main: #333333;           /* Gris casi negro para lectura cómoda */
    --heading-color: var(--color-black);

    /* ----------------------------------------------------------------------
       3. TIPOGRAFÍA
       ---------------------------------------------------------------------- */
    --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* ----------------------------------------------------------------------
       4. SISTEMA DE SOMBRAS (Profundidad y Elevación)
       ---------------------------------------------------------------------- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04);
    
    /* Sombra coloreada específica para CTAs principales */
    --shadow-blue: 0 8px 25px rgba(0, 86, 179, 0.25);

    /* ----------------------------------------------------------------------
       5. BORDES (Radii)
       ---------------------------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 50px;
}

/* --------------------------------------------------------------------------
   PREPARACIÓN PARA MODO OSCURO (Opcional a futuro)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    /* Descomentar y ajustar si en un futuro se desea que la página se adapte al modo oscuro del sistema del usuario */
    /*
    :root {
        --bg-main: #121212;
        --text-main: #e0e0e0;
        --heading-color: #ffffff;
        --color-light: #1e1e1e;
        --color-gray-light: #333333;
        --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.5);
    }
    */
}