:root {
    /* ==========================================
        TIPOGRAFÍA
       ========================================== */
    --main-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Escala (Perfect Fourth) */
    --font-xs: 0.75rem;   /* 12px */
    --font-sm: 0.875rem;  /* 14px */
    --font-base: 1rem;    /* 16px */
    --font-md: 1.25rem;   /* 20px */
    --font-lg: 1.5rem;    /* 24px */
    --font-xl: 2rem;      /* 32px */
    --font-xxl: 3rem;     /* 48px */

    /* ==========================================
        PALETA DE COLORES
       ========================================== */
    --primary-color: #020018;
    --secondary-color: #9400D3;
    --accent-color: #FF0080;
    --bg-body: #F4F4F4;
    --text-main: #020018;
    --text-secondary: #222;
    --text-light: #FFF;
    --white: #FFF;
    --dark-color: #000;

    /* ==========================================
        SISTEMA DE ESPACIADO (Grid System)
       ========================================== */
    --space-xs: 0.25rem; /* 4px */
    --space-sm: 0.5rem;  /* 8px */
    --space-md: 1rem;    /* 16px */
    --space-lg: 2rem;    /* 32px */
    --space-xl: 4rem;    /* 64px */

    /* ==========================================
        LAYOUT & BREAKPOINTS
       ========================================== */
    --max-width: 1200px;
    --border-radius: 5px;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 10px rgba(0,0,0,0.15);

    /* Transiciones suaves para botones/enlaces */
    --transition: all 0.3s ease;
}

/* ==========================================
    BOTONES PERSONALIZADOS

    .btn-fill ---- Relleno sólido
    .btn-outline ---- Delineado con borde y fondo transparente
    .btn-accent --- Call to Action con color de acento
    .btn-text-line ---- Diseño lineal con movimiento
========================================== */