/**
 * Variables CSS Globales para Django Blog
 *
 * Este archivo contiene todas las variables CSS que pueden ser sobrescritas
 * por otras aplicaciones para personalizar el diseño del blog.
 *
 * Uso en otras apps:
 * Puedes sobrescribir estas variables creando tu propio archivo CSS que
 * redefina las variables antes de cargar los estilos del blog.
 */

:root {
    /* ========== COLORES PRINCIPALES - MARCA TRADUCTORENVIVO ========== */
    --blog-color-primario: #007bff;
    --blog-color-secundario: #00d1b2;
    --blog-color-acento: #00d1b2;
    --blog-color-error: #f56565;

    /* ========== COLORES DE TEXTO ========== */
    --blog-texto-principal: #2c3e50;
    --blog-texto-secundario: #4a5568;
    --blog-texto-terciario: #718096;
    --blog-texto-claro: #a0aec0;

    /* ========== FONDOS ========== */
    --blog-fondo-principal: #f8f9fa;
    --blog-fondo-secundario: #edf4f4;
    --blog-fondo-terciario: #ffffff;
    --blog-fondo-gradiente: linear-gradient(135deg, #007bff 0%, #00d1b2 100%);

    /* ========== BORDES ========== */
    --blog-borde-color: #e2e8f0;
    --blog-borde-radio: 8px;
    --blog-borde-radio-lg: 16px;
    --blog-borde-radio-sm: 4px;

    /* ========== SOMBRAS ========== */
    --blog-sombra-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --blog-sombra-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --blog-sombra-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --blog-sombra-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* ========== ESPACIADO ========== */
    --blog-espacio-xs: 0.5rem;
    --blog-espacio-sm: 1rem;
    --blog-espacio-md: 1.5rem;
    --blog-espacio-lg: 2rem;
    --blog-espacio-xl: 3rem;
    --blog-espacio-2xl: 4rem;

    /* ========== TIPOGRAFÍA ========== */
    --blog-fuente-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --blog-fuente-codigo: 'Fira Code', 'Courier New', monospace;

    --blog-texto-xs: 0.75rem;
    --blog-texto-sm: 0.875rem;
    --blog-texto-base: 1rem;
    --blog-texto-lg: 1.125rem;
    --blog-texto-xl: 1.25rem;
    --blog-texto-2xl: 1.5rem;
    --blog-texto-3xl: 1.875rem;
    --blog-texto-4xl: 2.25rem;
    --blog-texto-5xl: 3rem;

    --blog-peso-normal: 400;
    --blog-peso-medio: 500;
    --blog-peso-semibold: 600;
    --blog-peso-bold: 700;
    --blog-peso-extrabold: 800;

    --blog-altura-linea-normal: 1.6;
    --blog-altura-linea-relajada: 1.7;
    --blog-altura-linea-suelta: 1.8;

    /* ========== TAMAÑOS ========== */
    --blog-ancho-contenedor: 1200px;
    --blog-ancho-post: 800px;

    /* ========== TRANSICIONES ========== */
    --blog-transicion-rapida: 0.15s ease;
    --blog-transicion-normal: 0.3s ease;
    --blog-transicion-lenta: 0.5s ease;

    /* ========== Z-INDEX ========== */
    --blog-z-base: 1;
    --blog-z-dropdown: 10;
    --blog-z-header: 1000;
    --blog-z-modal: 9999;
}

/* ========== VARIANTES DE COLOR - TRADUCTORENVIVO ========== */
:root {
    /* Primario (Blue) */
    --blog-primario-100: #cce5ff;
    --blog-primario-200: #99cbff;
    --blog-primario-300: #66b0ff;
    --blog-primario-400: #3396ff;
    --blog-primario-500: var(--blog-color-primario);
    --blog-primario-600: #0062cc;
    --blog-primario-700: #004a99;
    --blog-primario-800: #003166;
    --blog-primario-900: #001933;

    /* Secundario (Turquoise) */
    --blog-secundario-100: #ccf5ef;
    --blog-secundario-200: #99ebdf;
    --blog-secundario-300: #66e0cf;
    --blog-secundario-400: #33d6bf;
    --blog-secundario-500: var(--blog-color-secundario);
    --blog-secundario-600: #00a78e;
    --blog-secundario-700: #007d6b;
    --blog-secundario-800: #005447;
    --blog-secundario-900: #002a24;

    /* Acento (Turquoise igual que secundario) */
    --blog-acento-100: #ccf5ef;
    --blog-acento-200: #99ebdf;
    --blog-acento-300: #66e0cf;
    --blog-acento-400: #33d6bf;
    --blog-acento-500: var(--blog-color-acento);
    --blog-acento-600: #00a78e;
    --blog-acento-700: #007d6b;
    --blog-acento-800: #005447;
    --blog-acento-900: #002a24;
}