@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    --primary: #135bec;
    --background-light: #f6f6f8;
    --background-dark: #0a0c10;
    --matrix-green: #00FF41;
    --cyberpunk-purple: #BC13FE;
    --terminal-gray: #1c1f27;
    --border-dark: #282e39;
}

/* Base Terminal Effects */
.scanline {
    width: 100%;
    height: 100px;
    z-index: 10;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.1;
    position: fixed;
    pointer-events: none;
}

.dark .scanline {
    opacity: 0.1;
}

.light .scanline {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.5;
}

.blinking-cursor::after {
    content: "|";
    animation: blink 1s step-start infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.grid-bg {
    background-size: 40px 40px;
}

.dark .grid-bg {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

.light .grid-bg {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

/* Transitions */
.theme-transition {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

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

.dark ::-webkit-scrollbar-thumb {
    background: #282e39;
    border-radius: 4px;
}

.light ::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

section {
    scroll-margin-top: 50px;
}