/* Custom Design System for ARQ-D */

:root {
    --primary: #002642;
    --secondary: #725a39;
    --background: #faf9f8;
    --surface: #faf9f8;
    --on-background: #1a1c1c;
    --on-surface: #1a1c1c;
    --outline-variant: #c3c7ce;
}

@layer base {
    body {
        font-family: 'Manrope', sans-serif;
    }
    h1, h2, h3, h4 {
        font-family: 'Noto Serif', serif;
    }
}

/* Blueprint Canvas Background */
.blueprint-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.15;
    background-image: 
        linear-gradient(to right, var(--outline-variant) 0.5px, transparent 0.5px),
        linear-gradient(to bottom, var(--outline-variant) 0.5px, transparent 0.5px);
    background-size: 80px 80px;
}

/* Typography Enhancements */
.text-glow {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Responsive Overrides */
.no-radius {
    border-radius: 0px !important;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Custom Grayscale Hover Effect */
.portfolio-img {
    filter: grayscale(100%);
    transition: filter 0.7s ease, transform 0.7s ease;
}

.portfolio-img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
}