/**
 * Web3 Crypto Network Connect - Site Theme
 * Trebuchet MS, warm amber/emerald palette, no blue/black
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

:root {
    /* Warm dark palette */
    --bg-primary: #1a1814;
    --bg-secondary: #252220;
    --surface: #2d2a26;
    --surface-elevated: #3a3632;
    --border: #44403c;
    --border-light: rgba(255, 255, 255, 0.08);

    /* Accent: amber/gold + emerald */
    --accent: #d97706;
    --accent-light: #fbbf24;
    --accent-hover: #b45309;
    --accent-secondary: #059669;
    --accent-secondary-light: #10b981;

    /* Text */
    --text: #fafaf9;
    --text-muted: #a8a29e;
    --text-soft: #78716c;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #1a1814 0%, #252220 45%, #2d2a26 100%);
    --gradient-accent: linear-gradient(135deg, #d97706, #fbbf24);
    --gradient-emerald: linear-gradient(135deg, #059669, #10b981);
    --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);

    /* Shadows */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 40px rgba(217, 119, 6, 0.12);
    --shadow-glow-emerald: 0 0 30px rgba(5, 150, 105, 0.15);

    /* Typography - Trebuchet MS style (DM Sans as modern alternative) */
    --font-main: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
    --font-display: 'DM Sans', var(--font-main);

    /* Motion */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 0.2s;
    --duration-normal: 0.35s;
    --duration-slow: 0.5s;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-80px) translateX(30px); }
    50% { transform: translateY(-160px) translateX(-30px); }
    75% { transform: translateY(-80px) translateX(50px); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes pulse-soft {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Utility classes */
.animate-fade-in-up {
    animation: fadeInUp 0.7s var(--ease-out-expo) both;
}
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }