/* Custom Design System Tokens & Utilities */

:root {
    --color-moss: #2E4036;
    --color-clay: #CC5833;
    --color-cream: #F2F0E9;
    --color-charcoal: #1A1A1A;
}

body {
    -webkit-tap-highlight-color: transparent;
}

/* Global Noise Overlay */
#noise-overlay {
    background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* View Transitions */
.view-content {
    will-change: transform, opacity;
}

/* Typography Overrides */
h1, h2, h3 {
    letter-spacing: -0.02em;
}

/* Glassmorphism */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.dark .glass-panel {
    background: rgba(13, 13, 18, 0.7);
}

/* Animations */
@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}