/* Tailwind Custom Overrides for Brutalist/Minimalist Design */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --brutal-black: #000000;
    --brutal-white: #FFFFFF;
    --brutal-gray: #F5F5F5;
    --brutal-dark: #1A1A1A;
    --brutal-accent: #0000FF;
    --brutal-red: #FF0000;
    --brutal-yellow: #FFFF00;
}

* {
    font-family: 'Inter', sans-serif;
}

body {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

/* Brutalist Utility Classes */
.brutal-border {
    border: 3px solid var(--brutal-black);
    box-shadow: 8px 8px 0 0 var(--brutal-black);
}

.brutal-border-thin {
    border: 2px solid var(--brutal-black);
    box-shadow: 4px 4px 0 0 var(--brutal-black);
}

.brutal-button {
    border: 3px solid var(--brutal-black);
    box-shadow: 4px 4px 0 0 var(--brutal-black);
    transition: all 0.1s ease;
}

.brutal-button:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 0 var(--brutal-black);
}

.brutal-button:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 0 var(--brutal-black);
}

/* Typography */
.brutal-heading {
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.95;
}

.brutal-subheading {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Grid Patterns */
.brutal-grid {
    background-image:
        linear-gradient(to right, #000 1px, transparent 1px),
        linear-gradient(to bottom, #000 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Animations */
@keyframes brutal-slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

.brutal-slide-in {
    animation: brutal-slide 0.3s ease-out;
}