/* ============================================
   GLOBAL DESIGN TOKENS - GLOBAL SEGUROS
   Sistema unificado de variables CSS
   ============================================ */

:root {
  /* ========== COLORES CORPORATIVOS ========== */
  --azul-global: #00327D;
  --azul-profundo: #0A1628;

  /* ========== COLORES POR RAMO/PRODUCTO ========== */
  --color-educativos: #0087DC;
  --color-pension: #00B478;
  --color-rentas: #9B5091;
  --color-renta-vitalicia: #F0A000;
  --color-previsional: #8C5F46;
  --color-accidentes: #BE2D55;
  --color-vida: #DC2319;

  /* ========== DEGRADADOS CORPORATIVOS ========== */
  /* Usando solo los 3 azules principales */
  --gradient-primary: linear-gradient(135deg, var(--azul-global) 0%, var(--color-educativos) 100%);
  --gradient-dark: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul-global) 100%);
  --gradient-hero: linear-gradient(180deg, rgba(0,50,125,0.85) 0%, rgba(0,135,220,0.7) 50%, rgba(10,22,40,0.9) 100%);
  --gradient-card: linear-gradient(135deg, rgba(0,135,220,0.03) 0%, rgba(0,50,125,0.02) 100%);

  /* ========== COLORES DE SUPERFICIE ========== */
  --bg: #FFFFFF;
  --bg-alt: #F8FAFC;
  --bg-dark: #0A1628;
  --surface-elevated: #F1F5F9;

  /* ========== ICONOS ========== */
  /* Iconos sobre fondos claros */
  --icon-color: var(--color-educativos);
  
  /* Iconos sobre fondos oscuros */
  --icon-bg-dark: rgba(255,255,255,0.15);
  --icon-color-dark: #FFFFFF;

  /* ========== COLORES DE TEXTO ========== */
  --text: #111827;
  --text-secondary: #374151;
  --text-light: #FFFFFF;
  --muted: #6B7280;
  --muted-2: #4B5563;

  /* ========== COLORES DE BORDE ========== */
  --border: #E5E7EB;
  --border-light: #F3F4F6;
  --border-strong: #D1D5DB;
  --border-subtle: rgba(17,24,39,0.08);

  /* ========== ESTADOS DE FOCO ========== */
  /* Usar --focus-ring en la sección de Estados Interactivos */

  /* ========== SOMBRAS ========== */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --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 -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);

  /* ========== BORDER RADIUS ========== */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* ========== CONTENEDORES ========== */
  --container: 1200px;
  --container-sm: 960px;

  /* ========== TRANSICIONES ========== */
  /* Usar --duration-* + --ease-* en la sección de Animación */

  /* ========== TIPOGRAFÍA ========== */
  /* Familia de fuente */
  --font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-family-serif: Georgia, serif;
  
  /* Tamaños de fuente - Escala tipográfica */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 20px;
  --font-size-4xl: 24px;
  --font-size-5xl: 28px;
  --font-size-6xl: 30px;
  --font-size-7xl: 32px;
  --font-size-8xl: 36px;
  --font-size-9xl: 40px;
  --font-size-10xl: 48px;
  
  /* Pesos de fuente */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.15;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.6;
  --line-height-extra-loose: 1.7;
  --line-height-body: 1.65;
  
  /* Letter spacing */
  --letter-spacing-tighter: -0.02em;
  --letter-spacing-tight: -0.015em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  
  /* ========== COMPONENTES TIPOGRÁFICOS ========== */
  /* Títulos principales */
  --typography-h1-size: var(--font-size-10xl);
  --typography-h1-weight: var(--font-weight-extrabold);
  --typography-h1-line-height: 1.05;
  --typography-h1-letter-spacing: var(--letter-spacing-tighter);
  
  --typography-h2-size: var(--font-size-9xl);
  --typography-h2-weight: var(--font-weight-bold);
  --typography-h2-line-height: var(--line-height-snug);
  --typography-h2-letter-spacing: var(--letter-spacing-tighter);
  
  --typography-h3-size: var(--font-size-5xl);
  --typography-h3-weight: var(--font-weight-bold);
  --typography-h3-line-height: 1.2;
  --typography-h3-letter-spacing: var(--letter-spacing-normal);
  
  --typography-h4-size: var(--font-size-3xl);
  --typography-h4-weight: var(--font-weight-semibold);
  --typography-h4-line-height: 1.25;
  --typography-h4-letter-spacing: var(--letter-spacing-normal);
  
  /* Body text */
  --typography-body-size: var(--font-size-xl);
  --typography-body-weight: var(--font-weight-normal);
  --typography-body-line-height: var(--line-height-body);
  --typography-body-letter-spacing: var(--letter-spacing-tight);
  
  --typography-body-lg-size: var(--font-size-2xl);
  --typography-body-lg-line-height: var(--line-height-extra-loose);
  
  --typography-body-sm-size: var(--font-size-lg);
  --typography-body-sm-line-height: var(--line-height-loose);
  
  /* Subtítulos */
  --typography-subtitle-size: var(--font-size-2xl);
  --typography-subtitle-weight: var(--font-weight-normal);
  --typography-subtitle-line-height: var(--line-height-extra-loose);
  
  /* Pills/Tags */
  --typography-pill-size: var(--font-size-sm);
  --typography-pill-weight: var(--font-weight-semibold);
  --typography-pill-letter-spacing: var(--letter-spacing-wide);
  
  /* Botones */
  --typography-button-size: var(--font-size-md);
  --typography-button-weight: var(--font-weight-semibold);
  --typography-button-line-height: var(--line-height-tight);
  
  --typography-button-sm-size: var(--font-size-base);
  
  /* Links */
  --typography-link-size: var(--font-size-md);
  --typography-link-weight: var(--font-weight-semibold);
  
  /* Small text */
  --typography-small-size: var(--font-size-base);
  --typography-small-weight: var(--font-weight-normal);
  
  --typography-caption-size: var(--font-size-sm);
  --typography-caption-weight: var(--font-weight-normal);

  /* ========== SPACING ========== */
  /* Sistema de espaciado consistente */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* Spacing semántico */
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-3);
  --spacing-lg: var(--spacing-4);
  --spacing-xl: var(--spacing-6);
  --spacing-2xl: var(--spacing-8);
  --spacing-3xl: var(--spacing-12);

  /* ========== TAMAÑOS DE COMPONENTES ========== */
  /* Buttons */
  --btn-height-sm: 36px;
  --btn-height-md: 44px;
  --btn-height-lg: 52px;
  --btn-padding-x-sm: 12px;
  --btn-padding-x-md: 20px;
  --btn-padding-x-lg: 28px;

  /* Icons */
  --icon-size-xs: 16px;
  --icon-size-sm: 20px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 48px;
  --icon-size-2xl: 64px;

  /* Inputs */
  --input-height-sm: 36px;
  --input-height-md: 44px;
  --input-height-lg: 52px;
  --input-padding-x: 16px;
  --input-padding-y: 12px;

  /* Cards */
  --card-padding-sm: 16px;
  --card-padding-md: 24px;
  --card-padding-lg: 32px;
  --card-gap: 24px;

  /* ========== ESTADOS INTERACTIVOS ========== */
  /* Hover transforms */
  --hover-lift: translateY(-2px);
  --hover-lift-sm: translateY(-1px);
  --hover-lift-lg: translateY(-4px);
  --hover-scale: scale(1.02);
  --hover-scale-sm: scale(1.01);
  --hover-scale-lg: scale(1.05);

  /* Focus rings */
  --focus-ring: 0 0 0 3px rgba(0,135,220,0.3);
  --focus-ring-error: 0 0 0 3px rgba(220,38,38,0.2);
  --focus-ring-success: 0 0 0 3px rgba(22,163,74,0.2);

  /* Disabled state */
  --disabled-opacity: 0.6;
  --disabled-cursor: not-allowed;

  /* ========== Z-INDEX SCALE ========== */
  --z-base: 1;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-modal-backdrop: 1000;
  --z-modal: 2000;
  --z-popover: 3000;
  --z-tooltip: 4000;

  /* ========== DURACIONES DE ANIMACIÓN ========== */
  --duration-instant: 0.1s;
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;
  --duration-slower: 0.5s;

  /* ========== EASINGS ========== */
  --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);
}