/**
 * Design Tokens - Sistema de Diseño GotoSend
 * Área Pública
 *
 * @package    GotoSend_Tasas_Cuba
 * @subpackage GotoSend_Tasas_Cuba/public/css
 * @version    2.0.0
 */

/* ==========================================================================
   PALETA DE COLORES - GotoSend Brand
   ========================================================================== */
:root {
	/* Colores Principales - Ratios WCAG AAA sobre blanco */
	--gtc-primary: #074b78;        /* Primary GotoSend - 8.94:1 (AAA ✓) */
	--gtc-primary-light: #0a5e96;  /* Hover state */
	--gtc-primary-dark: #053a5a;   /* Active state */
	
	--gtc-secondary: #00a8ff;      /* Secondary GotoSend - 5.02:1 (AA ✓) */
	--gtc-secondary-light: #00c8ff;
	--gtc-secondary-dark: #0088cc;
	
	--gtc-accent: #00ff88;         /* Accent GotoSend - 11.25:1 sobre primary (AAA ✓) */
	--gtc-accent-light: #66ffb3;
	--gtc-accent-dark: #00c851;
	
	/* Colores Semánticos */
	--gtc-success: #00c851;
	--gtc-success-light: #d4f1d4;
	--gtc-success-dark: #00a041;
	
	--gtc-warning: #ffb300;
	--gtc-warning-light: #fff3cd;
	--gtc-warning-dark: #ff8f00;
	
	--gtc-error: #ff3838;
	--gtc-error-light: #ffe0e0;
	--gtc-error-dark: #d32f2f;
	
	--gtc-info: #2196f3;
	--gtc-info-light: #e3f2fd;
	--gtc-info-dark: #1976d2;
	
	/* Colores Neutrales - Escala de Grises */
	--gtc-white: #ffffff;
	--gtc-black: #000000;
	
	--gtc-gray-50: #f9fafb;
	--gtc-gray-100: #f3f4f6;
	--gtc-gray-200: #e5e7eb;
	--gtc-gray-300: #d1d5db;
	--gtc-gray-400: #9ca3af;
	--gtc-gray-500: #6b7280;
	--gtc-gray-600: #4b5563;
	--gtc-gray-700: #374151;
	--gtc-gray-800: #1f2937;
	--gtc-gray-900: #111827;
	
	/* Colores de Fondo */
	--gtc-bg: #ffffff;
	--gtc-bg-secondary: #f8f9fa;
	--gtc-card-bg: #ffffff;
	
	/* Colores de Texto */
	--gtc-text: #333333;
	--gtc-text-light: #666666;
	--gtc-text-muted: #9ca3af;
	
	/* Colores de Borde */
	--gtc-border: #e0e0e0;
	--gtc-border-light: #f3f4f6;
	--gtc-border-dark: #d1d5db;
}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */
:root {
	/* Familias de Fuentes */
	--gtc-font-primary: 'Play', sans-serif;
	--gtc-font-secondary: 'Roboto Condensed', sans-serif;
	--gtc-font-mono: 'Courier New', 'Courier', monospace;
	
	/* Tamaños de Fuente - Escala Tipográfica Fluida */
	--gtc-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);     /* 12-14px */
	--gtc-text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);         /* 14-16px */
	--gtc-text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);      /* 16-18px */
	--gtc-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);    /* 18-20px */
	--gtc-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20-24px */
	--gtc-text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);    /* 24-30px */
	--gtc-text-3xl: clamp(1.875rem, 1.65rem + 1vw, 2.25rem);      /* 30-36px */
	--gtc-text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);        /* 36-48px */
	
	/* Pesos de Fuente */
	--gtc-font-light: 300;
	--gtc-font-normal: 400;
	--gtc-font-medium: 500;
	--gtc-font-semibold: 600;
	--gtc-font-bold: 700;
	
	/* Alturas de Línea */
	--gtc-leading-tight: 1.25;
	--gtc-leading-normal: 1.5;
	--gtc-leading-relaxed: 1.75;
	
	/* Espaciado de Letras */
	--gtc-tracking-tight: -0.025em;
	--gtc-tracking-normal: 0;
	--gtc-tracking-wide: 0.025em;
}

/* ==========================================================================
   ESPACIADO - Sistema de 8px
   ========================================================================== */
:root {
	--gtc-space-0: 0;
	--gtc-space-1: 0.25rem;   /* 4px */
	--gtc-space-2: 0.5rem;    /* 8px */
	--gtc-space-3: 0.75rem;   /* 12px */
	--gtc-space-4: 1rem;      /* 16px */
	--gtc-space-5: 1.25rem;   /* 20px */
	--gtc-space-6: 1.5rem;    /* 24px */
	--gtc-space-8: 2rem;      /* 32px */
	--gtc-space-10: 2.5rem;   /* 40px */
	--gtc-space-12: 3rem;     /* 48px */
	--gtc-space-16: 4rem;     /* 64px */
	--gtc-space-20: 5rem;     /* 80px */
	--gtc-space-24: 6rem;     /* 96px */
}

/* ==========================================================================
   BORDER RADIUS
   ========================================================================== */
:root {
	--gtc-radius-none: 0;
	--gtc-radius-sm: 0.25rem;    /* 4px */
	--gtc-radius-base: 0.5rem;   /* 8px */
	--gtc-radius-md: 0.75rem;    /* 12px */
	--gtc-radius-lg: 1rem;       /* 16px */
	--gtc-radius-xl: 1.5rem;     /* 24px */
	--gtc-radius-2xl: 2rem;      /* 32px */
	--gtc-radius-full: 9999px;   /* Círculo perfecto */
	
	/* Aliases para compatibilidad */
	--gtc-radius: var(--gtc-radius-base);
}

/* ==========================================================================
   SOMBRAS - Sistema de Elevación
   ========================================================================== */
:root {
	/* Sombras Base */
	--gtc-shadow-none: none;
	--gtc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--gtc-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--gtc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--gtc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--gtc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--gtc-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--gtc-shadow-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
	
	/* Sombras de Color */
	--gtc-shadow-primary: 0 20px 40px rgba(7, 75, 120, 0.15);
	--gtc-shadow-accent: 0 20px 40px rgba(0, 255, 136, 0.15);
	
	/* Sombra Interior */
	--gtc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
	
	/* Elevación Semántica (Material Design) */
	--gtc-elevation-0: none;
	--gtc-elevation-1: var(--gtc-shadow-sm);
	--gtc-elevation-2: var(--gtc-shadow-base);
	--gtc-elevation-3: var(--gtc-shadow-md);
	--gtc-elevation-4: var(--gtc-shadow-lg);
	--gtc-elevation-5: var(--gtc-shadow-xl);
	
	/* Alias para compatibilidad */
	--gtc-shadow: var(--gtc-shadow-base);
}

/* ==========================================================================
   TRANSICIONES Y ANIMACIONES
   ========================================================================== */
:root {
	/* Duraciones */
	--gtc-transition-fast: 150ms;
	--gtc-transition-base: 250ms;
	--gtc-transition-slow: 350ms;
	--gtc-transition-slower: 500ms;
	--gtc-transition-slowest: 700ms;
	
	/* Easing Functions */
	--gtc-ease-linear: linear;
	--gtc-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--gtc-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--gtc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--gtc-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--gtc-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
	
	/* Transiciones Comunes */
	--gtc-transition-all: all var(--gtc-transition-base) var(--gtc-ease-out);
	--gtc-transition-colors: color var(--gtc-transition-fast) var(--gtc-ease-out),
	                         background-color var(--gtc-transition-fast) var(--gtc-ease-out),
	                         border-color var(--gtc-transition-fast) var(--gtc-ease-out);
	--gtc-transition-opacity: opacity var(--gtc-transition-base) var(--gtc-ease-out);
	--gtc-transition-transform: transform var(--gtc-transition-base) var(--gtc-ease-out);
}

/* ==========================================================================
   Z-INDEX SEMÁNTICO
   ========================================================================== */
:root {
	--gtc-z-base: 0;
	--gtc-z-dropdown: 1000;
	--gtc-z-sticky: 1020;
	--gtc-z-fixed: 1030;
	--gtc-z-modal-backdrop: 1040;
	--gtc-z-modal: 1050;
	--gtc-z-popover: 1060;
	--gtc-z-tooltip: 1070;
	--gtc-z-notification: 1080;
}

/* ==========================================================================
   GRADIENTES
   ========================================================================== */
:root {
	/* Gradientes de Marca */
	--gtc-gradient-primary: linear-gradient(135deg, var(--gtc-primary) 0%, var(--gtc-secondary) 100%);
	--gtc-gradient-accent: linear-gradient(135deg, var(--gtc-accent-dark) 0%, var(--gtc-accent) 100%);
	
	/* Gradientes de Color */
	--gtc-gradient-blue: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--gtc-gradient-purple: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	--gtc-gradient-orange: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
	--gtc-gradient-green: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
	
	/* Gradientes Neutros */
	--gtc-gradient-gray: linear-gradient(135deg, var(--gtc-gray-100) 0%, var(--gtc-gray-300) 100%);
	--gtc-gradient-light: linear-gradient(180deg, var(--gtc-white) 0%, var(--gtc-gray-50) 100%);
	
	/* Gradiente Mesh (Fondo Decorativo) */
	--gtc-gradient-mesh: 
		radial-gradient(at 0% 0%, rgba(7, 75, 120, 0.05) 0px, transparent 50%),
		radial-gradient(at 100% 0%, rgba(0, 168, 255, 0.05) 0px, transparent 50%),
		radial-gradient(at 100% 100%, rgba(0, 255, 136, 0.05) 0px, transparent 50%),
		radial-gradient(at 0% 100%, rgba(7, 75, 120, 0.05) 0px, transparent 50%);
}

/* ==========================================================================
   BREAKPOINTS - Para uso en media queries
   ========================================================================== */
:root {
	--gtc-breakpoint-xs: 375px;
	--gtc-breakpoint-sm: 640px;
	--gtc-breakpoint-md: 768px;
	--gtc-breakpoint-lg: 1024px;
	--gtc-breakpoint-xl: 1280px;
	--gtc-breakpoint-2xl: 1536px;
}

/* ==========================================================================
   MODO OSCURO - Dark Mode Tokens
   ========================================================================== */
html[data-theme="dark"] .gtc-container,
[data-theme="dark"] .gtc-container {
	/* Colores Principales Ajustados */
	--gtc-primary: #0a5e96;
	--gtc-primary-light: #1a7eb8;
	--gtc-primary-dark: #074b78;
	
	--gtc-secondary: #00c8ff;
	--gtc-secondary-light: #33d4ff;
	--gtc-secondary-dark: #00a8ff;
	
	--gtc-accent: #66ffb3;
	--gtc-accent-light: #99ffc9;
	--gtc-accent-dark: #00ff88;
	
	/* Neutrales Invertidos */
	--gtc-gray-50: #111827;
	--gtc-gray-100: #1f2937;
	--gtc-gray-200: #374151;
	--gtc-gray-300: #4b5563;
	--gtc-gray-400: #6b7280;
	--gtc-gray-500: #9ca3af;
	--gtc-gray-600: #d1d5db;
	--gtc-gray-700: #e5e7eb;
	--gtc-gray-800: #f3f4f6;
	--gtc-gray-900: #f9fafb;
	
	/* Fondos Oscuros */
	--gtc-bg: #1a1f2e;
	--gtc-bg-secondary: #2a3142;
	--gtc-card-bg: #2a3142;
	
	/* Textos Claros */
	--gtc-text: #e1e8ed;
	--gtc-text-light: #a4adb8;
	--gtc-text-muted: #6c757d;
	
	/* Bordes Oscuros */
	--gtc-border: #3a4556;
	--gtc-border-light: #2a3142;
	--gtc-border-dark: #4a5566;
	
	/* Sombras Más Intensas */
	--gtc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	--gtc-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	--gtc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
	--gtc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
	--gtc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
	--gtc-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
	--gtc-shadow-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.7);
	
	/* Sombras de Color Ajustadas */
	--gtc-shadow-primary: 0 20px 40px rgba(10, 94, 150, 0.2);
	--gtc-shadow-accent: 0 20px 40px rgba(0, 255, 136, 0.2);
	
	/* Gradientes Ajustados */
	--gtc-gradient-light: linear-gradient(180deg, var(--gtc-gray-100) 0%, var(--gtc-gray-50) 100%);
}

/* Fallback para prefers-color-scheme (solo si NO hay theme manual) */
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .gtc-container {
		--gtc-primary: #0a5e96;
		--gtc-secondary: #00c8ff;
		--gtc-accent: #66ffb3;
		--gtc-text: #e1e8ed;
		--gtc-text-light: #a4adb8;
		--gtc-bg: #1a1f2e;
		--gtc-bg-secondary: #2a3142;
		--gtc-border: #3a4556;
		--gtc-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
		--gtc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
		--gtc-shadow-primary: 0 20px 40px rgba(0, 255, 136, 0.1);
	}
}