/* ==========================================================================
   Zzooni4 Design System - Core Tokens & Modern Utility Classes
   ========================================================================== */

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

:root {
    /* Color Tokens - Modern Slate & Indigo Spectrum */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Pretendard', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Primary Accent */
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #312e81;

    /* Surface & Background */
    --bg-base: #0f172a;
    --bg-light: #f8fafc;
    --surface-card: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.82);
    --surface-glass-border: rgba(226, 232, 240, 0.8);

    /* Text Colors */
    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
    --shadow-glow-indigo: 0 0 25px -5px rgba(99, 102, 241, 0.4);
    --shadow-glow-emerald: 0 0 25px -5px rgba(16, 185, 129, 0.4);
}

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* Aurora Mesh Background */
.aurora-bg {
    background-color: #0f172a;
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.25) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(168, 85, 247, 0.22) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.2) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(20, 184, 166, 0.15) 0px, transparent 50%);
}

.subtle-mesh-light {
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 10% 10%, rgba(224, 231, 255, 0.6) 0px, transparent 50%),
        radial-gradient(at 90% 15%, rgba(243, 232, 255, 0.6) 0px, transparent 50%),
        radial-gradient(at 50% 90%, rgba(241, 245, 249, 0.8) 0px, transparent 50%);
}

/* Micro-animations */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.animate-shake {
    animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}

.animate-pulse-glow {
    animation: pulseGlow 2s infinite ease-in-out;
}

/* Custom Interactive Card Styles */
.feature-card {
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    border-color: rgba(199, 210, 254, 0.9);
}

.feature-card:hover .card-arrow {
    transform: translate(3px, -3px);
    opacity: 1;
}

.card-arrow {
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0.5;
}

/* Modern Input Focus Enhancement */
.modern-input {
    transition: all 0.2s ease;
}

.modern-input:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
    border-color: #6366f1;
}

/* Loading Spinner */
.btn-spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}