/* css/variables.css 
   ==========================================================================
   Variables
   ==========================================================================
   Este archivo contiene todos los valores reutilizables (colores, fuentes,
   espaciados) de nuestro proyecto. Al centralizar esto, es mucho más fácil
   cambiar un color en toda la página modificando solo una línea.
*/

:root {
    /* 
      1. Paleta de Colores 
      Estos tonos fueron extraídos del diseño original.
    */
    --color-primary: #113c4a;
    /* Azul Cerceta Oscuro - Color de fondo principal */
    --color-primary-hover: #0c2a34;
    /* Tono más oscuro para hovers */
    --color-cream: #f4eedb;
    /* Crema - Usado para textos y botones */
    --color-cream-hover: #ffffff;
    /* Blanco puro para hovers de botones crema */
    --color-brown: #8b5a2b;
    /* Marrón (opcional, incluido en la config original) */
    --color-verified: #1DA1F2;
    /* Azul del ícono de verificado (estilo Twitter) */

    /* Colores transparentes para efectos de superposición (Glassmorphism) */
    --color-primary-overlay: rgba(17, 60, 74, 0.7);
    /* Para oscurecer la imagen de fondo */
    --color-cream-border: rgba(244, 238, 219, 0.3);
    /* Borde sutil del avatar */
    --color-cream-text-muted: rgba(244, 238, 219, 0.9);
    /* Texto secundario un poco transparente */
    --color-cream-text-dim: rgba(244, 238, 219, 0.8);
    /* Íconos sociales en reposo */

    /* 
      2. Tipografía 
      Definimos las familias de fuentes para títulos y textos.
    */
    --font-display: 'Montserrat', sans-serif;
    /* Para el título principal (nombre) */
    --font-sans: 'Inter', sans-serif;
    /* Para subtítulos, botones y enlaces */

    /* 
      3. Espaciados y Radios de Borde (Border Radius) 
    */
    --border-radius-btn: 1rem;
    /* Bordes redondeados de los botones */
    --border-radius-avatar: 50%;
    /* Círculo perfecto para la foto de perfil */

    /* 
      4. Sombras (Shadows)
      Sombras suaves para dar profundidad al diseño.
    */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* 
      5. Transiciones
      Definimos duraciones estándar para que las animaciones sean consistentes.
    */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
}