/* ONSOL-GO MASTER DESIGN SYSTEM */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=JetBrains+Mono:wght@400;700&display=swap');

/* THE VOID (Background) */
html, body, #app, main, .header, .footer, .layout-wrapper, .container {
    background-color: #050505 !important;
    color: #f2f2f2 !important;
}

/* THE TERMINAL (Header) */
header, .header-wrapper {
    background-color: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid #1a1a1a !important;
}

/* THE NAV (Links) */
.nav-link, .header-item a, a {
    color: #777 !important;
    font-family: 'JetBrains Mono', monospace !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
}

.nav-link:hover, a:hover {
    color: #FF0000 !important;
}

/* THE ARTIFACTS (Product Cards) */
.product-item, .card {
    background-color: #080808 !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0px !important;
    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

.product-item:hover {
    border-color: #FF0000 !important;
    transform: scale(1.02);
}

/* THE ACTION (Buttons) */
button, .button, .btn, .add-to-cart-btn {
    background-color: transparent !important;
    border: 2px solid #FF0000 !important;
    color: #fff !important;
    border-radius: 0px !important;
    font-family: 'JetBrains Mono', monospace !important;
    padding: 15px 30px !important;
}

button:hover {
    background-color: #FF0000 !important;
    color: #000 !important;
    box-shadow: 8px 8px 0px #fff !important;
}

/* THE LORE (Headings) */
h1, h2, h3, .product-name {
    font-family: 'Space Grotesk', sans-serif !important;
    text-transform: uppercase !important;
}