@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --color-surface: #f5f1e8;
    --color-text: #5a3b37;
    --color-principal: #bf2021;
    --color-teal: #048ba8;
    --color-rose: #c08081;
    --color-sage: #badab5;
    --color-earth: #93584c;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply bg-[#f5f1e8] text-[#5a3b37] antialiased;
        font-family: 'Crimson Text', serif;
    }
    
    h1, h2, h3, h4, h5, h6, .font-heading {
        font-family: 'Bebas Neue', sans-serif;
        @apply tracking-wider uppercase text-[#5a3b37];
    }

    .font-principal {
        @apply text-[#bf2021];
    }

    .font-technical {
        font-family: 'Space Mono', monospace;
    }
}

@layer components {
    .btn-primary {
        @apply bg-[#bf2021] text-white px-8 py-3 font-heading text-xl transition-all duration-300 hover:bg-[#5a3b37] inline-block;
    }

    .btn-outline {
        @apply border border-[#5a3b37] text-[#5a3b37] px-8 py-3 font-heading text-xl transition-all duration-300 hover:bg-[#5a3b37] hover:text-white inline-block;
    }

    .card-brutalist {
        @apply bg-white/50 border border-[#5a3b37]/10 p-4 transition-transform duration-300 hover:-translate-y-1;
    }

    .label-technical {
        @apply font-technical text-[10px] uppercase tracking-widest text-[#048ba8];
    }
}

/* Custom Utilities */
.text-ipsei-red { color: #bf2021; }
.text-ipsei-brown { color: #5a3b37; }
.text-ipsei-sage { color: #badab5; }
.text-ipsei-teal { color: #048ba8; }
.text-ipsei-rose { color: #c08081; }
.text-ipsei-earth { color: #93584c; }
.bg-parchment { background-color: #f5f1e8; }

/* Mobile Menu */
.mobile-menu {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open {
    transform: translateX(0);
}
.mobile-nav-link {
    transition: opacity 0.2s ease, color 0.2s ease;
}
.mobile-nav-link:hover {
    opacity: 0.7;
}

/* Hamburger Animation */
#mobile-menu-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}
#mobile-menu-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
#mobile-menu-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}

/* Cart Icon */
.cart-count {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cart-count svg {
    transition: transform 0.2s ease;
}
.cart-count:hover svg {
    transform: scale(1.15);
}
.cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #bf2021;
    color: white;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    padding: 0 4px;
}