:root {
    --bg-base: #0a0f1d;
    --bg-surface: #131b2e;
    --bg-card: #1c2742;
    --primary: #38bdf8;
    --primary-glow: rgba(56, 189, 248, 0.15);
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #2e3d60;
    --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: var(--font-stack);
    background-color: var(--bg-base);
    color: var(--text-main);
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

body {
    overflow-x: hidden;
    background-color: var(--bg-base);
    color: var(--text-main);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Base Text Styles & Animations */
.highlight {
    color: var(--primary);
    text-shadow: 0 0 20px var(--primary-glow);
}

.animate-text {
    background: linear-gradient(45deg, #fff, var(--primary), #818cf8);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 5s linear infinite;
}

@keyframes textGradient {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}