/* Gravitas AI - Design Tokens v1.0
   Única fuente de verdad para variables de diseño */

:root {
  /* Colores principales */
  --g-color-bg: #000000;
  --g-color-text: #FFFFFF;
  --g-color-text-muted: rgba(255, 255, 255, 0.7);
  --g-color-text-dim: rgba(255, 255, 255, 0.5);
  
  /* Degradado de marca */
  --g-gradient-start: #1CA3FF;
  --g-gradient-end: #7B3FE4;
  --g-gradient: linear-gradient(135deg, #1CA3FF, #7B3FE4);
  --g-gradient-hover: linear-gradient(135deg, #3AB0FF, #8B4FF0);
  
  /* Escala de grises */
  --g-gray-100: #111111;
  --g-gray-200: #1A1A1A;
  --g-gray-300: #2A2A2A;
  --g-gray-400: #404040;
  --g-gray-500: #666666;
  --g-gray-600: #999999;
  --g-gray-700: #CCCCCC;
  --g-gray-800: #E5E5E5;
  --g-gray-900: #F5F5F5;
  
  /* Tipografías */
  --g-font-head: "Libre Baskerville", "Times New Roman", Times, serif;
  --g-font-ui: "Manrope", "Plus Jakarta Sans", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  
  /* Tamaños tipográficos */
  --g-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --g-text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --g-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --g-text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --g-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --g-text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --g-text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
  --g-text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --g-text-5xl: clamp(3rem, 2.5rem + 2vw, 4rem);
  
  /* Espaciados (escala 4-64px) */
  --g-space-1: 0.25rem;
  --g-space-2: 0.5rem;
  --g-space-3: 0.75rem;
  --g-space-4: 1rem;
  --g-space-5: 1.25rem;
  --g-space-6: 1.5rem;
  --g-space-8: 2rem;
  --g-space-10: 2.5rem;
  --g-space-12: 3rem;
  --g-space-16: 4rem;
  
  /* Radios de borde */
  --g-radius-sm: 8px;
  --g-radius-md: 12px;
  --g-radius-lg: 16px;
  --g-radius-xl: 24px;
  --g-radius-full: 9999px;
  
  /* Sombras */
  --g-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --g-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --g-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
  --g-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
  --g-shadow-glow: 0 0 40px rgba(28, 163, 255, 0.3);
  
  /* Glass effect */
  --g-glass: rgba(255, 255, 255, 0.03);
  --g-glass-border: rgba(255, 255, 255, 0.08);
  --g-glass-blur: blur(10px);
  
  /* Z-index */
  --g-z-dropdown: 100;
  --g-z-sticky: 200;
  --g-z-modal: 300;
  --g-z-toast: 400;
  
  /* Transiciones */
  --g-transition-fast: 150ms ease;
  --g-transition-base: 250ms ease;
  --g-transition-slow: 350ms ease;
  --g-transition-smooth: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Breakpoints (para referencia JS) */
  --g-bp-sm: 640px;
  --g-bp-md: 768px;
  --g-bp-lg: 1024px;
  --g-bp-xl: 1280px;
  --g-bp-2xl: 1536px;
}

/* Soporte para modo de alto contraste */
@media (prefers-contrast: high) {
  :root {
    --g-color-text-muted: rgba(255, 255, 255, 0.85);
    --g-glass-border: rgba(255, 255, 255, 0.15);
  }
}