@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* LIGHT THEME: Rosa Bebé / Fuerte como CTA y Azul Noche como Contraste */
  
  /* Neutrales (Fondo y Textos) */
  --bg-primary: #FFFFFF; /* Blanco Puro */
  --bg-secondary: #F5F5F5; /* Gris muy claro para inputs/fondos sutiles */
  
  --text-primary: #0A1128; /* Azul Noche ultra oscuro (en lugar del casi negro) */
  --text-secondary: #4A5568; /* Gris medio */
  --text-inverse: #FFFFFF; /* Texto sobre botones rosas o azules oscuros */

  /* Colores de Marca (Extraídos del Decaedro) */
  --brand-pink: #FF66A3; /* Rosa del decaedro */
  --brand-pink-hover: #E64C8A; /* Rosa un poco más oscuro para hover */
  --brand-night: #0038A8; /* Azul del decaedro */
  
  /* Bordes */
  --border-light: #E5E5E5;
  
  /* Sombras Dramáticas (Spider-Man Style) pero adaptadas a luz */
  --shadow-raised: rgba(10, 17, 40, 0.15) 0px 12px 32px 0px;
  --shadow-floating: rgba(10, 17, 40, 0.25) 0px 30px 80px 0px;
  --shadow-elevated: rgba(10, 17, 40, 0.35) 0px 20px 60px 0px;
  --shadow-deep: rgba(10, 17, 40, 0.45) 0px 30px 90px 0px;

  /* Tipografía - Sistema Spider-Man */
  --font-display: 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  
  /* Escala Agresiva (Fluid Typography) */
  --text-sm: clamp(0.75rem, 0.1vi + 0.7rem, 0.875rem); /* 12-14px */
  --text-base: clamp(1rem, 0.1vi + 0.98rem, 1.125rem); /* 16px body */
  --text-lg: clamp(1.125rem, 0.5vi + 1rem, 1.375rem); /* 18px-22px (Botones) */
  --text-xl: clamp(1.5rem, 1vi + 1.25rem, 1.875rem); /* 24-30px H2 */
  --text-2xl: clamp(2.5rem, 4vi + 1rem, 4.5rem); /* 40px-72px H1 */
  --text-3xl: clamp(3rem, 6vi + 1rem, 7rem); /* 48px-112px Display (mitad de tamaño) */
  
  /* Espaciado (Regla del 4px) */
  --container-width: 1360px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-xxl: 120px;
  
  /* Radios de borde (Hard edges o Pills) */
  --radius-none: 0px; /* Secciones y cartas planas */
  --radius-sm: 4px; /* Inputs */
  --radius-md: 12px; /* Cartas elevadas */
  --radius-pill: 50px; /* Botones principales */
  --radius-circle: 50%; /* Iconos sociales */
  
  /* Transiciones */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}