/* /assets/css/variables.css */
/* Variables CSS globales para Hypermathics - Basadas en diseño ITAgency */

:root {
    /* ═══════════════════════════════════════════════════
       PALETA DE COLORES PRINCIPAL
    ═══════════════════════════════════════════════════ */
    --color-primary: #1e88e5;
    --color-primary-light: #64b5f6;
    --color-primary-dark: #0a1e3d;
    --color-accent: #2196f3;
    --color-accent-glow: rgba(30, 136, 229, 0.35);

    /* ═══════════════════════════════════════════════════
       FONDOS
    ═══════════════════════════════════════════════════ */
    --color-bg-dark: #050a18;
    --color-bg-section: #07112b;
    --color-bg-card: rgba(14, 30, 73, 0.55);
    --color-bg-card-hover: rgba(30, 136, 229, 0.08);
    --color-bg-glass: rgba(255, 255, 255, 0.03);
    --color-bg-input: rgba(255, 255, 255, 0.05);

    /* ═══════════════════════════════════════════════════
       TEXTOS
    ═══════════════════════════════════════════════════ */
    --color-white: #ffffff;
    --color-text-primary: rgba(255, 255, 255, 0.92);
    --color-text-secondary: rgba(255, 255, 255, 0.65);
    --color-text-muted: rgba(255, 255, 255, 0.40);

    /* ═══════════════════════════════════════════════════
       BORDES Y SOMBRAS
    ═══════════════════════════════════════════════════ */
    --color-border: rgba(30, 136, 229, 0.15);
    --color-border-hover: rgba(30, 136, 229, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 30px rgba(30, 136, 229, 0.2);
    --shadow-card-hover: 0 20px 50px rgba(30, 136, 229, 0.15);

    /* ═══════════════════════════════════════════════════
       TIPOGRAFÍA
    ═══════════════════════════════════════════════════ */
    --font-heading: 'Righteous', 'Rajdhani', sans-serif;
    --font-body: 'Montserrat', 'Roboto', sans-serif;
    --font-mono: 'Roboto Mono', monospace;

    /* ═══════════════════════════════════════════════════
       TAMAÑOS
    ═══════════════════════════════════════════════════ */
    --container-max: 1320px;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-lg: 20px;

    /* ═══════════════════════════════════════════════════
       TRANSICIONES
    ═══════════════════════════════════════════════════ */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.35s ease;
    --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════════════════
   RESUMEN DEL ARCHIVO
   Archivo: /assets/css/variables.css
   Función: Define todas las variables CSS (custom properties) del sitio:
   paleta de colores, fondos, textos, bordes, sombras, tipografía,
   tamaños y transiciones. Inspirado en la plantilla ITAgency con
   esquema azul oscuro corporativo.
═══════════════════════════════════════════════════ */