Update index.css

Signed-off-by: Aitor Alien <[email protected]>

Author: Alien69Flow

src/index.css

@@ -17,34 +17,24 @@
   :root {
     --background: 240 33% 5%;
     --foreground: 0 0% 98%;
-
     --card: 240 33% 8%;
     --card-foreground: 0 0% 98%;
-
     --popover: 240 33% 5%;
     --popover-foreground: 0 0% 98%;
-
     --primary: 48 83% 72%;
     --primary-foreground: 240 33% 10%;
-
     --secondary: 142 67% 45%;
     --secondary-foreground: 0 0% 98%;
-
     --muted: 240 20% 20%;
     --muted-foreground: 240 10% 80%;
-
     --accent: 48 83% 72%;
     --accent-foreground: 240 33% 10%;
-
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-
     --border: 240 20% 16%;
     --input: 240 20% 16%;
     --ring: 48 83% 72%;
-
     --radius: 0.5rem;
-
     --sidebar-background: 240 33% 5%;
     --sidebar-foreground: 0 0% 98%;
     --sidebar-primary: 48 83% 72%;
@@ -55,28 +45,28 @@
     --sidebar-ring: 48 83% 72%;
   }
 
-  /* IMPORTANTE: Declaraciones de fuente prioritarias */
-  h1, h2, h3, h4, h5, h6 {
+  /* TIPOGRAFÍA: Nasalization solo para títulos y botones */
+  h1, h2, h3, h4, h5, h6, button {
     font-family: 'Nasalization', sans-serif;
-    font-weight: 400; /* Asegurado que no esté en bold */
+    font-weight: 400;
     letter-spacing: 0.5px;
   }
 
-  body, p, span, div, a, button {
+  /* Exo para texto general y formularios */
+  body, p, span, div, a, input, textarea, label {
     font-family: 'Exo', system-ui, sans-serif;
   }
 
-  /* Clase estándar para fuente Nasalization */
+  /* Helper para forzar Nasalization donde quieras */
   .font-nasalization {
     font-family: 'Nasalization', sans-serif;
     font-weight: 400;
     letter-spacing: 0.5px;
   }
-}
 
-@layer base {
-  * {
-    @apply border-border;
+  /* Borde global sin usar @apply en el selector universal */
+  :where(*, *::before, *::after) {
+    border-color: hsl(var(--border));
   }
 
   body {
@@ -87,21 +77,19 @@
   ::-webkit-scrollbar {
     width: 8px;
   }
-
   ::-webkit-scrollbar-track {
-    background: theme('colors.alien.space-dark');
+    background: hsl(var(--sidebar-background));
   }
-
   ::-webkit-scrollbar-thumb {
-    background: theme('colors.alien.gold-dark');
+    background: hsl(var(--sidebar-primary));
     border-radius: 4px;
   }
-
   ::-webkit-scrollbar-thumb:hover {
-    background: theme('colors.alien.gold');
+    background: hsl(var(--sidebar-primary-foreground));
   }
 }
 
+/* === Helpers y utilidades === */
 .text-glow {
   text-shadow: 0 0 8px rgba(240, 216, 130, 0.8);
 }
@@ -117,11 +105,10 @@
 /* Improved card-border without unwanted backgrounds */
 .card-border {
   position: relative;
-  border-radius: theme('borderRadius.lg');
+  border-radius: var(--radius);
   background: rgba(17, 17, 25, 0.6);
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px); /* Puede avisar pero es seguro para navegadores modernos */
 }
-
 .card-border::before {
   content: '';
   position: absolute;
@@ -131,12 +118,12 @@
   bottom: 0;
   border-radius: inherit;
   padding: 1.5px;
-  background: linear-gradient(145deg, theme('colors.alien.gold'), theme('colors.alien.green'));
+  background: linear-gradient(145deg, hsl(var(--sidebar-primary)), hsl(var(--sidebar-accent)));
   -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
+  -webkit-mask-composite: xor; /* Puede avisar, es experimental */
+  mask-composite: exclude;     /* Puede avisar, es experimental */
   pointer-events: none;
 }
 
@@ -149,15 +136,13 @@
   align-items: center;
   max-width: 100%;
 }
-
 .star-wars-content {
   transform: rotateX(20deg);
   transform-origin: center top;
   animation: star-wars-float 4s ease-out forwards;
   width: 100%;
   padding: 2rem;
 }
-
 @keyframes star-wars-float {
   0% {
     transform: rotateX(20deg) translateY(100px);
@@ -172,24 +157,20 @@
   }
 }
 
-/* Parallax effect */
 .parallax {
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-/* Background gradient */
 .bg-glow-radial {
   background: radial-gradient(circle at center, rgba(34, 197, 94, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
 }
 
-/* Cosmic grid */
 .cosmic-grid {
   position: relative;
 }
-
 .cosmic-grid::before {
   content: "";
   position: absolute;
@@ -205,8 +186,6 @@
   pointer-events: none;
   z-index: -1;
 }
-
-/* Price ticker animation */
 @keyframes ticker-scroll {
   0% {
     transform: translateX(0);