/* Core Custom Properties (Variables) */
:root {
    /* Light Theme Tokens */
    --color-primary: #3b82f6; /* Premium Blue */
    --color-primary-rgb: 59, 130, 246;
    --color-secondary: #8b5cf6; /* Violet */
    --color-accent: #10b981; /* Emerald */
    
    --color-background: #ffffff;
    --color-surface: #f1f5f9; /* Slate 100 */
    --color-text-main: #0f172a; /* Slate 900 */
    --color-text-muted: #475569; /* Slate 600 */
}

/* Dark Theme Tokens */
.dark {
    --color-primary: #60a5fa; /* Lighter Blue for dark mode */
    --color-primary-rgb: 96, 165, 250;
    --color-secondary: #a78bfa; 
    --color-accent: #34d399;
    
    --color-background: #09090b; /* Zinc 950 */
    --color-surface: #18181b; /* Zinc 900 */
    --color-text-main: #f8fafc; /* Slate 50 */
    --color-text-muted: #94a3b8; /* Slate 400 */
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scroll Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Utilities */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }