:root {
    --charcoal: #334155;
    --industrial-blue: #1E40AF;
    --industrial-blue-hover: #1E3A8A;
    --crimson: #DC2626;
    --crimson-hover: #B91C1C;
    --whatsapp: #25D366;
    --whatsapp-hover: #1DA851;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    color: #0F172A;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Chivo', 'IBM Plex Sans', sans-serif;
    letter-spacing: -0.01em;
}

.font-mono-tech {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Blueprint grid overlay */
.blueprint-grid {
    background-image:
        linear-gradient(rgba(30, 64, 175, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 64, 175, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Industrial & crimson hard shadows */
.industrial-shadow {
    box-shadow: 6px 6px 0 0 #1E40AF;
    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.industrial-shadow:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0 0 #1E40AF;
}
.crimson-shadow {
    box-shadow: 4px 4px 0 0 #DC2626;
    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.crimson-shadow:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 #DC2626;
}

/* Fade-up entrance */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 500ms ease-out both; }

/* WhatsApp pulse */
@keyframes waPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    50%      { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
}
.wa-pulse { animation: waPulse 2.2s ease-out infinite; }

/* Active nav link — highlight by data-page on body */
body[data-page="home"] [data-nav="home"],
body[data-page="about"] [data-nav="about"],
body[data-page="products"] [data-nav="products"],
body[data-page="contact"] [data-nav="contact"] {
    color: #1E40AF;
    border-bottom: 2px solid #DC2626;
}

/* Card hover zoom for category imagery */
.cat-card:hover img { transform: scale(1.05); }
.cat-card img { transition: transform 500ms ease-out; }

/* Product card polish */
.prod-card:hover { border-color: #1E40AF; }
.prod-card img { transition: transform 500ms ease-out; }
.prod-card:hover img { transform: scale(1.05); }