@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Roboto:wght@100;300;400;500;700;900&display=swap');

:root {
  
  /* Colores principales */
  --color-dark: #232323;           /* Negro principal */
  --color-primary: #516CB7;        /* Azul principal */
  --color-success: #02874B;        /* Verde principal */
  --color-gray-dark: #595959;      /* Gris oscuro */
  --color-gray-medium: #767676;    /* Gris medio */
  --color-gray-light: #E7E7E7;     /* Gris claro */
  --color-accent: #C9D2FF;         /* Azul claro/lavanda */
  --color-warning: #02C66F;        /* Verde claro */
  
  /* Versiones RGB para transparencias */
  --color-primary-rgb: 81, 108, 183;
  --color-secondary-rgb: 118, 75, 162;
  
  /* Colores adicionales para UI */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-transparent: transparent;
  
  /* Colores secundarios */
  --color-secondary: #764BA2;
  
  /* Variaciones de colores principales */
  --color-primary-light: #6B7FCA;
  --color-primary-dark: #3F5499;
  --color-success-light: #0EA860;
  --color-success-dark: #026B38;
  
  /* Colores de estado */
  --color-error: #E74C3C;
  --color-error-light: #F8D7DA;
  --color-warning-alt: #F39C12;
  --color-info: #3498DB;
  
  /* Colores de grises adicionales */
  --color-gray-50: #F8F9FA;
  --color-gray-100: #F1F3F4;
  --color-gray-200: #E9ECEF;
  --color-gray-300: #DEE2E6;
  --color-gray-400: #CED4DA;
  --color-gray-500: #ADB5BD;
  --color-gray-600: #6C757D;
  --color-gray-700: #495057;
  --color-gray-800: #343A40;
  --color-gray-900: #212529;
  
  /* ========================================
     TIPOGRAFÍA
     ======================================== */
  
  /* Familias de fuentes */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Pesos de fuentes - Space Grotesk (Encabezados) */
  --font-weight-heading-light: 300;
  --font-weight-heading-medium: 500;
  --font-weight-heading-bold: 700;
  
  /* Pesos de fuentes - Roboto (Cuerpo) */
  --font-weight-body-thin: 100;
  --font-weight-body-light: 300;
  --font-weight-body-regular: 400;
  --font-weight-body-medium: 500;
  --font-weight-body-bold: 700;
  --font-weight-body-black: 900;
  
  /* Tamaños de fuente */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */
  --font-size-6xl: 3.75rem;    /* 60px */
  
  /* Alturas de línea */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  /* ========================================
     ESPACIADO
     ======================================== */
  
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
  --spacing-4xl: 6rem;      /* 96px */
  --spacing-5xl: 8rem;      /* 128px */
  
  /* ========================================
     BORDES Y SOMBRAS
     ======================================== */
  
  /* Radio de bordes */
  --border-radius-sm: 0.25rem;   /* 4px */
  --border-radius-md: 0.5rem;    /* 8px */
  --border-radius-lg: 0.75rem;   /* 12px */
  --border-radius-xl: 1rem;      /* 16px */
  --border-radius-2xl: 1.5rem;   /* 24px */
  --border-radius-full: 9999px;  /* Circular */
  
  /* Anchos de borde */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --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);
  
  /* ========================================
     TRANSICIONES Y ANIMACIONES
     ======================================== */
  
  /* Duraciones */
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 0.75s;
  
  /* Funciones de timing */
  --timing-ease: ease;
  --timing-ease-in: ease-in;
  --timing-ease-out: ease-out;
  --timing-ease-in-out: ease-in-out;
  --timing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Transiciones comunes */
  --transition-fast: all var(--duration-fast) var(--timing-ease-out);
  --transition-normal: all var(--duration-normal) var(--timing-ease-in-out);
  --transition-slow: all var(--duration-slow) var(--timing-ease-in-out);
  
  /* ========================================
     BREAKPOINTS (para uso con CSS Container Queries)
     ======================================== */
  
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* ========================================
     Z-INDEX
     ======================================== */
  
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;
  --z-index-header: 1000;
  
  /* ========================================
     GRADIENTES
     ======================================== */
  
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  --gradient-success: linear-gradient(135deg, var(--color-success), var(--color-success-light));
  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-primary-light));
  --gradient-dark: linear-gradient(135deg, var(--color-dark), var(--color-gray-dark));
  
  /* ========================================
     CONFIGURACIONES ESPECÍFICAS
     ======================================== */
  
  /* Contenedor máximo */
  --max-width: 1200px;
  --container-padding: var(--spacing-md);
  
  /* Header */
  --header-height: 4rem;
  --header-bg: rgba(255, 255, 255, 0.95);
  --header-shadow: var(--shadow-md);
  
  /* Botones */
  --button-padding: var(--spacing-sm) var(--spacing-lg);
  --button-border-radius: var(--border-radius-md);
  --button-transition: var(--transition-normal);
  
  /* Formularios */
  --input-padding: var(--spacing-sm) var(--spacing-md);
  --input-border-radius: var(--border-radius-md);
  --input-border-color: var(--color-gray-light);
  --input-focus-color: var(--color-primary);
}

/* ========================================
   CLASES UTILITARIAS PARA TIPOGRAFÍA
   ======================================== */

/* Familias de fuentes */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

/* Pesos de fuente - Space Grotesk */
.font-heading-light { font-family: var(--font-heading); font-weight: var(--font-weight-heading-light); }
.font-heading-medium { font-family: var(--font-heading); font-weight: var(--font-weight-heading-medium); }
.font-heading-bold { font-family: var(--font-heading); font-weight: var(--font-weight-heading-bold); }

/* Pesos de fuente - Roboto */
.font-body-thin { font-family: var(--font-body); font-weight: var(--font-weight-body-thin); }
.font-body-light { font-family: var(--font-body); font-weight: var(--font-weight-body-light); }
.font-body-regular { font-family: var(--font-body); font-weight: var(--font-weight-body-regular); }
.font-body-medium { font-family: var(--font-body); font-weight: var(--font-weight-body-medium); }
.font-body-bold { font-family: var(--font-body); font-weight: var(--font-weight-body-bold); }
.font-body-black { font-family: var(--font-body); font-weight: var(--font-weight-body-black); }

/* Tamaños de texto */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }

/* Colores de texto */
.text-dark { color: var(--color-dark); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-gray-dark { color: var(--color-gray-dark); }
.text-gray-medium { color: var(--color-gray-medium); }
.text-gray-light { color: var(--color-gray-light); }
.text-accent { color: var(--color-accent); }
.text-warning { color: var(--color-warning); }
.text-white { color: var(--color-white); }

/* ========================================
   CLASES UTILITARIAS PARA COLORES DE FONDO
   ======================================== */

.bg-dark { background-color: var(--color-dark); }
.bg-primary { background-color: var(--color-primary); }
.bg-success { background-color: var(--color-success); }
.bg-gray-dark { background-color: var(--color-gray-dark); }
.bg-gray-medium { background-color: var(--color-gray-medium); }
.bg-gray-light { background-color: var(--color-gray-light); }
.bg-accent { background-color: var(--color-accent); }
.bg-warning { background-color: var(--color-warning); }
.bg-white { background-color: var(--color-white); }

/* Gradientes */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-success { background: var(--gradient-success); }
.bg-gradient-accent { background: var(--gradient-accent); }
.bg-gradient-dark { background: var(--gradient-dark); }