/*
variables.css
Variables de diseño - sitio salud-celular.
Tema: editorial azul.
*/

:root {
  /* Colores primarios - azul profundo */
  --color-primario-900: #0A1929;
  --color-primario-800: #0E2438;
  --color-primario-700: #14324C;
  --color-primario-600: #1B4465;
  --color-primario-500: #22577E;
  --color-primario-400: #3E7CA6;
  --color-primario-300: #6BA3C7;
  --color-primario-200: #A3C9E2;
  --color-primario-100: #D0E4F0;
  --color-primario-50: #EAF3F9;

  /* Colores de acento - coral calido */
  --color-acento-900: #8A3324;
  --color-acento-800: #B34730;
  --color-acento-700: #D95E40;
  --color-acento-600: #FF7A59;
  --color-acento-500: #FF8F70;
  --color-acento-400: #FFA98D;
  --color-acento-300: #FFC3AC;
  --color-acento-200: #FFD8CB;
  --color-acento-100: #FFE8E0;
  --color-acento-50: #FFF4F0;

  /* Colores neutros - frios */
  --color-neutro-900: #16232E;
  --color-neutro-800: #1F2E3A;
  --color-neutro-700: #2E3E4C;
  --color-neutro-600: #5C6B77;
  --color-neutro-500: #75828D;
  --color-neutro-400: #94A0AA;
  --color-neutro-300: #B3BCC4;
  --color-neutro-200: #CDD4DA;
  --color-neutro-100: #E2E7EB;
  --color-neutro-50: #EEF1F3;
  --color-neutro-25: #F4F7F9;

  /* Colores semanticos */
  --color-exito: #2E9E5B;
  --color-advertencia: #E9B44C;
  --color-error: #D64545;
  --color-info: #3A8F9E;

  /* Fondos */
  --fondo-principal: #FFFFFF;
  --fondo-secundario: #F4F7F9;
  --fondo-terciario: #E9EEF2;

  /* Texto */
  --texto-principal: var(--color-neutro-800);
  --texto-secundario: var(--color-neutro-600);
  --texto-terciario: var(--color-neutro-500);
  --texto-claro: var(--color-neutro-300);
  --texto-inverso: #FFFFFF;

  /* Tipografias */
  --fuente-principal: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fuente-titulos: 'Fraunces', Georgia, serif;
  --fuente-logo: 'Space Grotesk', 'Figtree', sans-serif;
  --fuente-monoespaciada: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;

  /* Pesos */
  --peso-ligero: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-extrabold: 800;

  /* Tamanos base */
  --tamano-base: 16px;
  --tamano-small: 14px;
  --tamano-tiny: 12px;
  --tamano-micro: 10px;

  /* Escala tipografica */
  --tamano-h1: 2.441rem;
  --tamano-h2: 1.953rem;
  --tamano-h3: 1.563rem;
  --tamano-h4: 1.25rem;
  --tamano-h5: 1rem;
  --tamano-h6: 0.8rem;

  /* Alturas de linea */
  --linea-apretada: 1.2;
  --linea-normal: 1.5;
  --linea-relajada: 1.75;
  --linea-suelta: 2;

  /* Espaciado entre letras */
  --letras-compacto: -0.02em;
  --letras-normal: 0;
  --letras-amplio: 0.02em;
  --letras-muy-amplio: 0.08em;

  /* Espaciados (8px) */
  --espacio-0: 0;
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.25rem;
  --espacio-6: 1.5rem;
  --espacio-7: 1.75rem;
  --espacio-8: 2rem;
  --espacio-10: 2.5rem;
  --espacio-12: 3rem;
  --espacio-16: 4rem;
  --espacio-20: 5rem;
  --espacio-24: 6rem;
  --espacio-32: 8rem;

  /* Layout */
  --ancho-contenedor-sm: 640px;
  --ancho-contenedor-md: 768px;
  --ancho-contenedor-lg: 1024px;
  --ancho-contenedor-xl: 1280px;
  --ancho-contenedor-xxl: 1440px;
  --ancho-contenido-estrecho: 640px;
  --ancho-contenido-medio: 800px;
  --ancho-contenido-amplio: 1024px;

  /* Bordes redondeados */
  --radio-sm: 0.25rem;
  --radio-md: 0.5rem;
  --radio-lg: 0.75rem;
  --radio-xl: 1rem;
  --radio-xxl: 1.5rem;
  --radio-completo: 9999px;

  /* Sombras */
  --sombra-xs: 0 1px 2px 0 rgba(10, 25, 41, 0.05);
  --sombra-sm: 0 1px 3px 0 rgba(10, 25, 41, 0.1), 0 1px 2px 0 rgba(10, 25, 41, 0.06);
  --sombra-md: 0 4px 6px -1px rgba(10, 25, 41, 0.1), 0 2px 4px -1px rgba(10, 25, 41, 0.06);
  --sombra-lg: 0 10px 15px -3px rgba(10, 25, 41, 0.1), 0 4px 6px -2px rgba(10, 25, 41, 0.05);
  --sombra-xl: 0 20px 25px -5px rgba(10, 25, 41, 0.1), 0 10px 10px -5px rgba(10, 25, 41, 0.04);
  --sombra-xxl: 0 25px 50px -12px rgba(10, 25, 41, 0.25);
  --sombra-interior: inset 0 2px 4px 0 rgba(10, 25, 41, 0.06);

  /* Transiciones */
  --transicion-rapida: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-lenta: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-muy-lenta: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Z-index */
  --z-bajo: -1;
  --z-normal: 1;
  --z-elevado: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
}