/* ========================================
   VARIABLES CSS PARA CONSISTENCIA
   
   Este archivo contiene todas las variables CSS
   que se utilizan en el proyecto para mantener
   consistencia en colores, tamaños y espaciados.
   
   Para usar estas variables, importa este archivo
   antes de style.css en tu HTML:
   <link rel="stylesheet" href="css/variables.css">
   <link rel="stylesheet" href="css/style.css">
   ======================================== */

:root {
    /* ========================================
       COLORES PRINCIPALES
       ======================================== */
    
    /* Colores primarios del tema */
    --color-primario: #513629;              /* Café oscuro - Color principal */
    --color-secundario: #ffa451;            /* Naranja - Color de acento */
    --color-terciario: #F6AA93;             /* Salmón - Color de iconos */
    
    /* Colores de fondo */
    --color-fondo-principal: #f9f9f9;       /* Gris muy claro */
    --color-fondo-secundario: #f8f8f8;      /* Gris claro */
    --color-fondo-formulario: #fdf8e9;      /* Beige claro */
    
    /* Colores de texto */
    --color-texto-principal: #513629;       /* Café oscuro */
    --color-texto-secundario: #999;         /* Gris medio */
    --color-texto-error: #DE5959;           /* Rojo para errores */
    --color-texto-exito: #5F9025;           /* Verde para éxito */
    --color-texto-blanco: #fff;             /* Blanco puro */
    
    /* Colores de bordes */
    --color-borde-principal: #513629;       /* Café oscuro */
    --color-borde-secundario: #eee;         /* Gris muy claro */
    --color-borde-exito: #B3DC82;           /* Verde claro */
    --color-borde-separador: #CCC;          /* Gris medio */
    --color-borde-button: #CFD5D9;          /* Gris azulado */
    
    /* Colores de estado */
    --color-hover: #ffa500;                 /* Naranja para hover */
    --color-radio-checked: #ffa500;         /* Naranja para radio seleccionado */
    --color-radio-default: #ccc;            /* Gris para radio por defecto */
    --color-fondo-exito: #EBF6E0;           /* Verde muy claro */
    
    /* ========================================
       TAMAÑOS Y ESPACIADOS
       ======================================== */
    
    /* Tamaños de fuente */
    --fuente-pequena: 10px;                 /* Texto pequeño */
    --fuente-normal: 13px;                  /* Texto normal */
    --fuente-mediana: 14px;                 /* Texto base */
    --fuente-grande: 15px;                  /* Texto destacado */
    --fuente-boton: 17px;                   /* Botones */
    --fuente-boton-contacto: 18px;          /* Botón principal */
    --fuente-titulo: 25px;                  /* Títulos */
    
    /* Espaciados */
    --espaciado-pequeno: 5px;               /* Espaciado mínimo */
    --espaciado-normal: 10px;               /* Espaciado normal */
    --espaciado-medio: 15px;                /* Espaciado medio */
    --espaciado-grande: 20px;               /* Espaciado grande */
    --espaciado-extra-grande: 25px;         /* Espaciado extra grande */
    --espaciado-muy-grande: 40px;           /* Espaciado muy grande */
    
    /* Alturas estándar */
    --altura-campo: 35px;                   /* Altura de campos de entrada */
    --altura-textarea: 60px;                /* Altura de áreas de texto */
    --altura-radio: 30px;                   /* Altura de radio buttons */
    --altura-icono: 35px;                   /* Altura de contenedor de iconos */
    
    /* Anchos estándar */
    --ancho-campo-pequeno: 25%;             /* Ancho para campos pequeños */
    --ancho-campo-normal: 55%;              /* Ancho para campos normales */
    --ancho-campo-grande: 75%;              /* Ancho para campos grandes */
    --ancho-columna: 49.5%;                 /* Ancho de columnas */
    --ancho-boton: 90%;                     /* Ancho del botón principal */
    --ancho-icono: 30px;                    /* Ancho de contenedor de iconos */
    --ancho-maximo-form: 400px;             /* Ancho máximo del formulario */
    
    /* ========================================
       EFECTOS Y TRANSICIONES
       ======================================== */
    
    /* Bordes redondeados */
    --radio-pequeno: 3px;                   /* Radio pequeño */
    --radio-normal: 4px;                    /* Radio normal */
    --radio-medio: 5px;                     /* Radio medio */
    --radio-completo: 50%;                  /* Radio completo (circular) */
    
    /* Transiciones */
    --transicion-rapida: 0.3s ease;         /* Transición rápida */
    --transicion-lenta: 1s ease;            /* Transición lenta */
    
    /* Sombras */
    --sombra-texto: 0 1px 0 #fff;           /* Sombra de texto */
    --sombra-caja-interna: 0 1px 0 #fff inset; /* Sombra interior */
    --sombra-caja-boton: 0 1px 2px rgba(0,0,0,0.1) inset; /* Sombra de botón */
    --sombra-mensaje: 0 1px 1px 0 rgba(0, 0, 0, 0.03); /* Sombra de mensaje */
    
    /* ========================================
       GRADIENTES
       ======================================== */
    
    /* Gradiente principal */
    --gradiente-principal: linear-gradient(to bottom, #f8f8f8 0%, #f9f9f9 100%);
    
    /* Gradiente de botón */
    --gradiente-boton: linear-gradient(to bottom, #f7f9fa 0%, #f0f0f0 100%);
    
    /* Gradientes de líneas decorativas */
    --gradiente-linea-derecha: linear-gradient(to right, #7e7e7e 0%, #fff 100%);
    --gradiente-linea-izquierda: linear-gradient(to left, #7e7e7e 0%, #fff 100%);
    
    /* ========================================
       PUNTO DE RUPTURA
       ======================================== */
    
    /* Ancho máximo para móviles */
    --ancho-movil: 480px;                   /* Punto de ruptura para móviles */
}

/* ========================================
   COMENTARIOS DE USO
   
   Ejemplo de uso en CSS:
   
   .mi-elemento {
       color: var(--color-primario);
       font-size: var(--fuente-normal);
       padding: var(--espaciado-medio);
       border-radius: var(--radio-medio);
       transition: var(--transicion-rapida);
   }
   
   .mi-elemento:hover {
       color: var(--color-hover);
   }
   ======================================== */