:root {
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: #ffffff;
    color: #1A1A1A;
    border-radius: 9999px;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

.clip-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.text-gradient-orange {
    background: linear-gradient(135deg, #FF5000 0%, #D34100 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hover-zoom:hover img {
    transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}