@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import "tailwindcss";

@theme {
    --font-sans: "Poppins", system-ui, -apple-system, sans-serif;
    --font-display: "Poppins", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-neon: var(--neon);
    --color-neon-soft: var(--neon-soft);
    --color-amber: var(--amber);
}

:root {
    --radius: 0.875rem;
    /* ALPINO brand palette */
    --background: #09332C; /* Fence Green */
    --foreground: #F3F3F2; /* Bleached Silk */

    --card: rgb(0 119 85 / 0.18); /* Victoria Peak tint */
    --card-foreground: #F3F3F2;
    --popover: #09332C;
    --popover-foreground: #F3F3F2;
    --primary: #00FF7C; /* Spring Green */
    --primary-foreground: #09332C;
    --secondary: #007755; /* Victoria Peak */
    --secondary-foreground: #F3F3F2;
    --muted: rgb(0 119 85 / 0.25);
    --muted-foreground: rgb(243 243 242 / 0.7);
    --accent: #F4FF00; /* Busy Bee */
    --accent-foreground: #09332C;
    --destructive: #EF4444;
    --destructive-foreground: #F3F3F2;
    --border: rgb(0 255 124 / 0.18);
    --input: rgb(0 255 124 / 0.22);
    --ring: rgb(0 255 124 / 0.55);
    --neon: #00FF7C;
    --neon-soft: rgb(0 255 124 / 0.35);
    --amber: #F4FF00;
    /* Gradients & FX */
    --gradient-hero: radial-gradient(ellipse at 50% 0%, rgb(0 255 124 / 0.18), transparent 60%), linear-gradient(180deg, #09332C 0%, #052420 100%);
    --gradient-text: linear-gradient(180deg, #F3F3F2 0%, #00FF7C 100%);
    --gradient-neon: linear-gradient(135deg, #00FF7C 0%, #F4FF00 100%);
    --gradient-green: linear-gradient(135deg, #09332C 0%, #007755 60%, #00FF7C 100%);
    --glow-neon: 0 0 0 1px rgb(0 255 124 / 0.3), 0 10px 40px -10px rgb(0 255 124 / 0.55);
    --glow-soft: 0 0 60px -10px rgb(0 255 124 / 0.45);
    --shadow-glass: 0 1px 0 0 rgb(255 255 255 / 0.05) inset, 0 30px 60px -30px rgb(0 0 0 / 0.6);
    --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

.dark {
    color-scheme: dark;
}

@layer base {
    * {
        border-color: var(--border);
    }

    html, body {
        background: var(--background);
        color: var(--foreground);
    }

    body {
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        background-image: radial-gradient(1200px 600px at 50% -10%, rgb(0 255 124 / 0.10), transparent 60%), radial-gradient(800px 400px at 90% 110%, rgb(244 255 0 / 0.06), transparent 60%);
        background-attachment: fixed;
    }

    ::selection {
        background: var(--neon);
        color: var(--primary-foreground);
    }
}

@layer utilities {
    .glass {
        background: linear-gradient(180deg, rgb(9 51 44 / 0.82), rgb(5 36 32 / 0.88));
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        border: 1px solid rgb(0 255 124 / 0.22);
        box-shadow: var(--shadow-glass);
    }

    .glass-strong {
        background: linear-gradient(180deg, rgb(7 44 38 / 0.94), rgb(4 28 25 / 0.96));
        backdrop-filter: blur(12px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
        border: 1px solid rgb(0 255 124 / 0.28);
        box-shadow: var(--shadow-glass);
    }

    .text-gradient {
        background: var(--gradient-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .text-neon {
        color: var(--neon);
        text-shadow: 0 0 24px rgb(0 255 124 / 0.5);
    }

    .text-amber-neon {
        color: var(--amber);
        text-shadow: 0 0 24px rgb(244 255 0 / 0.55);
    }

    .input {
        width: 100%;
        background: rgb(255 255 255 / 0.03);
        border: 1px solid rgb(0 255 124 / 0.18);
        border-radius: 0.75rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        color: var(--foreground);
        outline: none;
        transition: border-color .2s, box-shadow .2s;
    }

        .input:focus {
            border-color: var(--neon);
            box-shadow: 0 0 0 2px rgb(0 255 124 / 0.18);
        }

    .btn-neon {
        background: var(--neon);
        color: var(--primary-foreground);
        box-shadow: var(--glow-neon);
        transition: transform .25s var(--transition-smooth), box-shadow .25s var(--transition-smooth);
        border-radius: 0.75rem;
        padding: 0.625rem 1.25rem;
        font-weight: 500;
    }

        .btn-neon:hover {
            transform: translateY(-1px);
            box-shadow: 0 0 0 1px var(--neon), 0 18px 50px -10px rgb(0 255 124 / 0.7);
            cursor: pointer;
        }

    .btn-amber {
        background: var(--amber);
        color: var(--accent-foreground);
        box-shadow: 0 0 0 1px rgb(244 255 0 / 0.35), 0 10px 40px -10px rgb(244 255 0 / 0.55);
        transition: transform .25s var(--transition-smooth), box-shadow .25s var(--transition-smooth);
        border-radius: 0.75rem;
        padding: 0.625rem 1.25rem;
        font-weight: 500;
    }

        .btn-amber:hover {
            transform: translateY(-1px);
            box-shadow: 0 0 0 1px var(--amber), 0 18px 50px -10px rgb(244 255 0 / 0.7);
            cursor: pointer;
        }

    .grid-bg {
        background-image: linear-gradient(rgb(0 255 124 / 0.04) 1px, transparent 1px), linear-gradient(90deg, rgb(0 255 124 / 0.04) 1px, transparent 1px);
        background-size: 40px 40px;
    }

    .scanline::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(180deg, rgb(255 255 255 / 0.02) 0 1px, transparent 1px 4px);
        pointer-events: none;
    }

    .glow-soft {
        box-shadow: var(--glow-soft);
    }

    .float {
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    .pulse-ring {
        box-shadow: 0 0 0 0 rgb(0 255 124 / 0.7);
        animation: pulseRing 2.4s ease-out infinite;
    }

    @keyframes pulseRing {
        0% {
            box-shadow: 0 0 0 0 rgb(0 255 124 / 0.5);
        }

        100% {
            box-shadow: 0 0 0 16px rgb(0 255 124 / 0);
        }
    }
}