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

:root {
    --primary: #0ea5a4;
    --primary-dark: #057a73;
    --secondary: #f59e0b;
    --bg: #fffaf0;
    --bg-light: #fff6e8;
    --text: #071422;
    --text-muted: #475569;
    --card: #ffffff;
    --border: #e6e8ea;
    --success: #16a34a;
    --spacing: 1.5rem;
}

/* Use Poppins as the primary font for the alternate theme */
body {
    font-family: 'Poppins', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Slightly brighter accent for highlights */
.highlight {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Subtle adjustments for buttons in the alternate theme */
.btn-primary {
    background: var(--primary);
    color: white;
}

.navbar {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border);
}

.nav-link {
    color: var(--text-muted);
}

/* Make project cards lighter */
.project-card {
    background: var(--card);
    border: 1px solid var(--border);
}

/* Footer adjustments */
.footer {
    background: var(--bg-light);
}

/* Ensure any elements relying on CSS variables pick up the alternate values */

/* --- Animation utilities & interactive styles (copied from main style.css) --- */
.magnetic-wrap {
    display: inline-block;
    position: relative;
    overflow: visible;
    will-change: transform;
}

@keyframes float3d {
    0% { transform: translateY(0) rotateX(0) rotateY(0); }
    50% { transform: translateY(-6px) rotateX(1deg) rotateY(-1deg); }
    100% { transform: translateY(0) rotateX(0) rotateY(0); }
}

.fade-in { animation: fadeIn 0.6s ease both; }

/* Button ripple (JS-assisted) */
.btn { position: relative; overflow: hidden; }
.btn .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,0.35); pointer-events: none; animation: rippleEffect 600ms ease-out; }
@keyframes rippleEffect { to { transform: scale(4); opacity: 0; } }

/* Social icons ripple support + transitions */
.social-icons a { position: relative; overflow: hidden; }
.social-icons a .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,0.18); pointer-events: none; animation: rippleEffect 640ms ease-out; }

/* Secondary CTA entrance helper */
.btn-secondary.entrance { transform: translateY(10px); opacity: 0; animation: btnEntrance 0.8s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes btnEntrance { to { transform: translateY(0); opacity: 1; } }

/* Small utility keyframe used elsewhere */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }