@tailwind base;
@tailwind components;
@tailwind utilities;

/* Kōdō Design System Global Styles */

:root {
    /* SPECTRE ASTRAL PALETTE */
    --kodo-void: 11 12 16;
    --kodo-ink: 23 25 35;
    --kodo-graphite: 31 40 51;
    --kodo-slate: 44 54 67;
    --kodo-steel: 59 69 84;

    --kodo-cyan: 102 252 241;
    --kodo-cyan-dim: 69 162 158;
    --kodo-magenta: 138 126 164;
    --kodo-orange: 230 184 156;

    --kodo-lime: 54 229 209;
    --kodo-gold: 234 179 8;
    --kodo-red: 230 57 70;

    --kodo-text-main: 243 243 224;
    --kodo-content-highlight: 255 255 255;
    --kodo-content-dim: 156 163 175;
}

@layer base {
    body {
        @apply bg-kodo-void text-kodo-primary font-body;
        -webkit-font-smoothing: antialiased;
        background-image:
            radial-gradient(circle at 15% 0%, rgba(var(--kodo-cyan), 0.05) 0%, transparent 40%),
            radial-gradient(circle at 85% 100%, rgba(var(--kodo-magenta), 0.05) 0%, transparent 40%);
        background-attachment: fixed;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--kodo-steel));
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--kodo-cyan-dim));
}

/* Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

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

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(var(--kodo-cyan), 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(var(--kodo-cyan), 0.4);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}