/**
 * 01. TOKENS & SYSTEM VARIABLES
 * Sistema de diseño de alta gama para la EGEMC — UMSS
 */
:root {
    /* Paleta Institucional */
    --eupg-navy-950: #000E1F;
    --eupg-navy-900: #001D3D;
    --eupg-navy-800: #002855;
    --eupg-navy-700: #003366;
    --eupg-navy-600: #004A8F;
    --eupg-cyan-500: #00BCD4;
    --eupg-cyan-400: #26C6DA;
    --eupg-cyan-600: #0097A7;
    --eupg-coral-500: #FF6B35;
    --eupg-coral-600: #E55A2B;
    --eupg-emerald-500: #10B981;
    --eupg-emerald-600: #059669;

    /* Semántica */
    --eupg-primary: var(--eupg-navy-700);
    --eupg-primary-dark: var(--eupg-navy-900);
    --eupg-accent: var(--eupg-cyan-500);
    --eupg-accent-text: #0E7490;
    --eupg-cta: var(--eupg-coral-500);
    --eupg-cta-hover: var(--eupg-coral-600);
    --eupg-ink: #0F172A;
    --eupg-text-muted: #64748B;
    --eupg-border: #E2E8F0;
    --eupg-border-subtle: rgba(255, 255, 255, 0.12);
    --eupg-surface: #F8FAFC;
    --eupg-surface-card: #FFFFFF;

    /* Glassmorphism */
    --eupg-glass-bg: rgba(255, 255, 255, 0.08);
    --eupg-glass-bg-card: rgba(0, 29, 61, 0.75);
    --eupg-glass-border: rgba(255, 255, 255, 0.15);
    --eupg-glass-blur: blur(16px);

    /* Sombras y Luces */
    --eupg-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --eupg-shadow-card: 0 4px 20px -2px rgba(0, 29, 61, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --eupg-shadow-hover: 0 16px 36px -4px rgba(0, 29, 61, 0.16), 0 6px 12px -2px rgba(0, 0, 0, 0.06);
    --eupg-shadow-glow: 0 0 24px rgba(0, 188, 212, 0.35);
    --eupg-shadow-coral-glow: 0 4px 18px rgba(255, 107, 53, 0.4);

    /* Bordes */
    --eupg-radius-sm: 6px;
    --eupg-radius-md: 12px;
    --eupg-radius-lg: 18px;
    --eupg-radius-xl: 24px;
    --eupg-radius-pill: 9999px;

    /* Transiciones */
    --eupg-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --eupg-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --eupg-transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Dimensiones Globales */
    --eupg-container-width: 1240px;
    --eupg-header-height: 80px;
}
