/**
 * ============================================
 * VARIABLES.CSS
 * ============================================
 * 
 * Archivo de variables CSS globales del proyecto.
 * Todas las variables de colores, fuentes, espaciado, etc.
 * 
 * @author: [Tu nombre]
 * @version: 1.0.0
 * @fecha: Noviembre 2024
 * 
 * ÍNDICE:
 * 1. Colores
 * 2. Tipografía
 * 3. Espaciado
 * 4. Sombras
 * 5. Bordes
 * 6. Transiciones
 * 7. Z-index
 * 
 * INSTRUCCIONES DE USO:
 * - Usar variables en lugar de valores hardcodeados
 * - Ejemplo: color: var(--color-primary);
 * - Para cambiar colores del sitio, solo edita este archivo
 * 
 * ============================================
 */

:root {
    /* ==========================================
       1. COLORES
       ========================================== */
    
    /* Colores principales del branding */
    --color-primary: #8B6F47;           /* Marrón dorado - Color principal del logo */
    --color-primary-dark: #6B5437;      /* Marrón oscuro - Para hover y énfasis */
    --color-primary-light: #A67C52;     /* Dorado claro - Para variaciones */
    --color-secondary: #F5F1E8;         /* Beige suave - Fondos y tarjetas */
    --color-accent: #A67C52;            /* Acento dorado - Elementos destacados */
    
    /* Colores de texto */
    --color-text-primary: #2C2C2C;      /* Gris oscuro - Texto principal */
    --color-text-secondary: #666666;    /* Gris medio - Texto secundario */
    --color-text-light: #999999;        /* Gris claro - Texto auxiliar */
    --color-white: #FFFFFF;             /* Blanco puro - Fondos y texto invertido */
    
    /* Colores de estado (para formularios y notificaciones) */
    --color-success: #4CAF50;           /* Verde - Estados exitosos */
    --color-error: #D32F2F;             /* Rojo - Errores y campos requeridos */
    --color-warning: #FFA726;           /* Naranja - Advertencias */
    --color-info: #29B6F6;              /* Azul - Información */
    
    
    /* ==========================================
       2. TIPOGRAFÍA
       ========================================== */
    
    /* Familias de fuentes */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Playfair Display', Georgia, serif;
    
    /* Tamaños de fuente - Sistema modular */
    --font-size-xs: 0.75rem;            /* 12px - Textos muy pequeños */
    --font-size-sm: 0.875rem;           /* 14px - Textos pequeños */
    --font-size-base: 1rem;             /* 16px - Tamaño base */
    --font-size-lg: 1.125rem;           /* 18px - Textos grandes */
    --font-size-xl: 1.25rem;            /* 20px - Subtítulos */
    --font-size-2xl: 1.5rem;            /* 24px - Títulos H4 */
    --font-size-3xl: 1.875rem;          /* 30px - Títulos H3 */
    --font-size-4xl: 2.25rem;           /* 36px - Títulos H2 */
    --font-size-5xl: 3rem;              /* 48px - Títulos H1 */
    
    /* Pesos de fuente */
    --font-weight-light: 300;           /* Light - Textos livianos */
    --font-weight-regular: 400;         /* Regular - Texto normal */
    --font-weight-medium: 500;          /* Medium - Énfasis ligero */
    --font-weight-semibold: 600;        /* Semibold - Subtítulos */
    --font-weight-bold: 700;            /* Bold - Títulos */
    
    /* Altura de línea */
    --line-height-tight: 1.2;           /* Títulos */
    --line-height-normal: 1.6;          /* Texto normal */
    --line-height-relaxed: 1.7;         /* Texto largo */
    
    
    /* ==========================================
       3. ESPACIADO
       ========================================== */
    
    /* Sistema de espaciado consistente (escala de 8px) */
    --spacing-xs: 0.5rem;               /* 8px - Espaciado muy pequeño */
    --spacing-sm: 1rem;                 /* 16px - Espaciado pequeño */
    --spacing-md: 1.5rem;               /* 24px - Espaciado medio */
    --spacing-lg: 2rem;                 /* 32px - Espaciado grande */
    --spacing-xl: 3rem;                 /* 48px - Espaciado muy grande */
    --spacing-2xl: 4rem;                /* 64px - Espaciado extra grande */
    --spacing-3xl: 5rem;                /* 80px - Espaciado máximo */
    
    /* Contenedores */
    --container-max-width: 1200px;      /* Ancho máximo del contenedor */
    --container-padding: 1rem;          /* Padding lateral del contenedor */
    
    
    /* ==========================================
       4. SOMBRAS
       ========================================== */
    
    /* Sistema de sombras para profundidad */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);                    /* Sombra pequeña */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);                    /* Sombra media */
    --shadow-lg: 0 12px 32px rgba(139, 111, 71, 0.15);            /* Sombra grande */
    --shadow-xl: 0 20px 40px rgba(139, 111, 71, 0.2);             /* Sombra extra grande */
    
    /* Sombras especiales */
    --shadow-focus: 0 0 0 3px rgba(139, 111, 71, 0.1);            /* Focus para accesibilidad */
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);          /* Sombra interior */
    
    
    /* ==========================================
       5. BORDES
       ========================================== */
    
    /* Radio de bordes */
    --radius-sm: 8px;                   /* Radio pequeño - Inputs, botones pequeños */
    --radius-md: 12px;                  /* Radio medio - Tarjetas */
    --radius-lg: 16px;                  /* Radio grande - Containers */
    --radius-xl: 24px;                  /* Radio extra grande - Modales */
    --radius-full: 9999px;              /* Radio completo - Círculos, pills */
    
    /* Anchos de borde */
    --border-thin: 1px;                 /* Borde delgado */
    --border-medium: 2px;               /* Borde medio */
    --border-thick: 4px;                /* Borde grueso */
    
    
    /* ==========================================
       6. TRANSICIONES
       ========================================== */
    
    /* Duraciones de transición */
    --transition-fast: 0.2s ease;       /* Transición rápida - Hover, focus */
    --transition-base: 0.3s ease;       /* Transición normal - Modales, dropdowns */
    --transition-slow: 0.5s ease;       /* Transición lenta - Animaciones complejas */
    
    /* Curvas de timing personalizadas */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);       /* Suave entrada y salida */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);            /* Suave salida */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);             /* Suave entrada */
    
    
    /* ==========================================
       7. Z-INDEX (Capas)
       ========================================== */
    
    /* Sistema de capas para evitar conflictos */
    --z-dropdown: 1000;                 /* Dropdowns y menús */
    --z-sticky: 1020;                   /* Elementos sticky */
    --z-fixed: 1030;                    /* Header fijo */
    --z-modal: 1040;                    /* Modales */
    --z-popover: 1050;                  /* Popovers */
    --z-tooltip: 1060;                  /* Tooltips */
    
    
    /* ==========================================
       8. BREAKPOINTS (No usables directamente en CSS)
       ========================================== */
    
    /* 
     * Estos valores son de referencia.
     * Úsalos en @media queries en responsive.css
     * 
     * --breakpoint-sm: 576px;   // Móviles grandes
     * --breakpoint-md: 768px;   // Tablets
     * --breakpoint-lg: 992px;   // Laptops
     * --breakpoint-xl: 1200px;  // Desktops
     */
}

/**
 * ============================================
 * DARK MODE (Opcional - Para futuras versiones)
 * ============================================
 */

/* 
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #FFFFFF;
        --color-text-secondary: #CCCCCC;
        --color-white: #1A1A1A;
        --color-secondary: #2C2C2C;
    }
}
*/

/**
 * ============================================
 * NOTAS DE USO
 * ============================================
 * 
 * CÓMO USAR ESTAS VARIABLES:
 * 
 * 1. En lugar de:
 *    color: #8B6F47;
 * 
 *    Usa:
 *    color: var(--color-primary);
 * 
 * 2. Para cambiar el color principal del sitio:
 *    Edita solo --color-primary en este archivo
 * 
 * 3. Para añadir nuevas variables:
 *    Sigue la convención de nombres
 *    Añade comentarios descriptivos
 * 
 * 4. Mantén la organización:
 *    Agrupa variables relacionadas
 *    Usa nombres descriptivos
 *    Documenta el propósito
 * 
 * ============================================
 */