styles.css

@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

@theme {
    --color-primary-50: #f0f9ff;
    --color-primary-100: #e0f2fe;
    --color-primary-200: #bae6fd;
    --color-primary-300: #7dd3fc;
    --color-primary-400: #38bdf8;
    --color-primary-500: #0ea5e9;
    --color-primary-600: #0284c7;
    --color-primary-700: #0369a1;
    --color-primary-800: #075985;
    --color-primary-900: #0c4a6e;
    --color-primary-950: #082f49;

    --color-accent-indigo-400: #818cf8;
    --color-accent-indigo-500: #6366f1;
    --color-accent-indigo-600: #4f46e5;

    --color-accent-emerald-400: #34d399;
    --color-accent-emerald-500: #10b981;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --animate-float-slow: float-slow 6s ease-in-out infinite;
    --animate-pulse-subtle: pulse-subtle 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-mesh-spin: mesh-spin 20s linear infinite;

    @keyframes float-slow {
        0%, 100% {
            transform: translateY(0px) rotate(0deg);
        }
        50% {
            transform: translateY(-10px) rotate(1deg);
        }
    }

    @keyframes pulse-subtle {
        0%, 100% {
            opacity: 0.2;
            transform: scale(1);
        }
        50% {
            opacity: 0.35;
            transform: scale(1.05);
        }
    }

    @keyframes mesh-spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #1e293b;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* Tipografía de alta precisión */
.font-sans {
    font-family: var(--font-sans);
}

.font-display {
    font-family: var(--font-display);
}

.font-heading {
    font-family: var(--font-heading);
}

.font-mono {
    font-family: var(--font-mono);
}

/* Glassmorphism y Paneles de Vanguardia */
.glass-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .glass-panel {
    background: rgba(14, 18, 27, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-dock {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.dark .glass-dock {
    background: rgba(8, 9, 14, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

/* Glow Card Interactivo con coordenadas del mouse */
.glow-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glow-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(2, 132, 199, 0.07), transparent 40%);
    border-radius: inherit;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.glow-card:hover::before {
    opacity: 1;
}

.dark .glow-card::before {
    background: radial-gradient(600px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(56, 189, 248, 0.12), transparent 45%);
}

/* Malla de cuadrícula técnica y elegante */
.engineered-grid {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

.dark .engineered-grid {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

/* Degradados de texto premium */
.text-gradient-cyan {
    background: linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dark .text-gradient-cyan {
    background: linear-gradient(135deg, #38bdf8 0%, #00d2ff 50%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-silver {
    background: linear-gradient(180deg, #1e293b 0%, #64748b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dark .text-gradient-silver {
    background: linear-gradient(180deg, #ffffff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Renderizado & Rendimiento */
.will-change-transform {
    will-change: transform;
}