/* css/variables.css */

:root {
    /* =========================================
       1. PALETA DE COLORES PRINCIPALES
       ========================================= */
    /* Verde pastel y amarillo cálido solicitados */
    --color-pastel-green: #b2dfdb;  
    --color-warm-yellow: #fff9c4;   
    
    /* Variantes para interacciones (hover) */
    --color-pastel-green-hover: #a0c9c5;
    --color-warm-yellow-hover: #e6e0b1;

    /* =========================================
       2. COLORES DE FONDO Y TEXTO (Minimalismo)
       ========================================= */
    --bg-main: #fafafa;             /* Fondo general de la página (casi blanco) */
    --bg-card: #ffffff;             /* Fondo blanco puro para tarjetas, inputs y modales */
    
    --text-primary: #2c3e50;        /* Texto principal (gris muy oscuro, más elegante que el negro puro) */
    --text-secondary: #6c7a89;      /* Texto secundario (biografías, placeholders, fechas) */
    --text-inverse: #ffffff;        /* Texto blanco para poner sobre imágenes o botones oscuros */
    
    --border-color: #eaeaea;        /* Color sutil para líneas divisorias */

    /* =========================================
       3. GRADIENTES
       ========================================= */
    --gradient-primary: linear-gradient(135deg, var(--color-pastel-green) 0%, var(--color-warm-yellow) 100%);
    --gradient-overlay: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); /* Sombra para el texto sobre imágenes */

    /* =========================================
       4. BORDES REDONDEADOS
       ========================================= */
    --radius-sm: 8px;               /* Para inputs de texto y botones pequeños */
    --radius-md: 16px;              /* Para botones principales y elementos medianos */
    --radius-lg: 24px;              /* Para las tarjetas de imágenes y modales (estilo moderno) */
    --radius-full: 50%;             /* Para fotos de perfil (avatares) */

    /* =========================================
       5. SOMBRAS (Profundidad suave)
       ========================================= */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* =========================================
       6. TIPOGRAFÍA Y ESPACIADOS
       ========================================= */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    
    /* Espaciados base para mantener el diseño aireado */
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    /* =========================================
       7. TRANSICIONES
       ========================================= */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
}