/* CSS Variables for Palette & Fonts */
:root {
    --color-cream: #FAF6F0;
    --color-terracotta: #D45D39;
    --color-charcoal: #121212;
    --color-muted: #6B7280;
}

body {
    background-color: var(--color-cream);
    color: var(--color-charcoal);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* Typography styles */
.font-display {
    font-family: 'Antonio', sans-serif;
}

.font-editorial {
    font-family: 'Playfair Display', serif;
}

/* Vertical Text Utility */
.writing-mode-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

/* Spinning Animation for Badge */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin 20s linear infinite;
}

/* Soft progress bar animations */
.progress-bar-fill {
    transition: width 1.5s cubic-bezier(0.1, 0.8, 0.3, 1);
}

/* Editorial layout elements */
.border-editorial {
    border-color: var(--color-charcoal);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-cream);
}
::-webkit-scrollbar-thumb {
    background: var(--color-charcoal);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-terracotta);
}

/* Interactive Project Card Hover */
.project-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover {
    transform: translateY(-4px);
}