@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    }
    .transition-all-300 {
        transition: all 0.3s ease;
    }
    
    .glass {
        background: #ffffff;
        border: 1px solid #e6ebf2;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 10px 30px rgba(15, 23, 42, 0.04);
    }
    .glass-hover {
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-hover:hover {
        border-color: rgba(22, 93, 255, 0.40);
        box-shadow: 0 12px 34px rgba(22, 93, 255, 0.14);
        transform: translateY(-6px);
    }
    
    .neon-text {
        background: linear-gradient(100deg, #1D4ED8 0%, #0891B2 55%, #7C3AED 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    
    .glow-btn {
        background: linear-gradient(100deg, #22D3EE, #3B82F6 55%, #8B5CF6);
        box-shadow: 0 8px 26px rgba(59, 130, 246, 0.30);
        transition: all 0.3s ease;
    }
    .glow-btn:hover {
        box-shadow: 0 10px 40px rgba(59, 130, 246, 0.45);
        transform: translateY(-2px) scale(1.02);
    }
    
    .tech-label {
        font-family: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }
    
    .bg-grid {
        background-image:
            linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
        background-size: 46px 46px;
    }
    
    .node-glow {
        box-shadow: 0 0 20px rgba(54, 207, 251, 0.45), inset 0 0 10px rgba(54, 207, 251, 0.20);
    }
}

body {
    font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    background-color: #F4F6FB;
    color: #334155;
    background-image:
        radial-gradient(900px 500px at 8% -10%, rgba(22, 93, 255, 0.07), transparent 60%),
        radial-gradient(820px 520px at 96% 0%, rgba(54, 207, 251, 0.07), transparent 60%);
    background-attachment: fixed;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #e9eef5; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #165DFF, #36CFFB);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3B82F6, #22D3EE);
}

::selection {
    background: rgba(22, 93, 255, 0.18);
    color: #0f172a;
}

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 84px; }

.toc-link {
    transition: all 0.25s ease;
    border-left: 2px solid transparent;
}
.toc-link:hover,
.toc-link.active {
    color: #165DFF;
    border-left-color: #36CFFB;
    background: rgba(22, 93, 255, 0.06);
}