@import "tailwindcss";

@font-face {
    font-family: 'VT323';
    src: url('./fonts/VT323-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto-VariableFont_wdth\,wght.ttf') format('truetype');
}
@layer base {

    body {
        font-family: "Roboto" sans-serif;

        color: white;
    }


}

@layer components {
    .card {
        @apply basis-full lg:basis-[calc(33.333%-1rem)] border border-neutral-700 p-4 bg-zinc-800/25 backdrop-blur-3xl rounded-sm hover:border-zinc-500/50 hover:scale-110 transition;
    }

    /* Reusable project card styles */
    .project-card {
        @apply w-full bg-neutral-900/40 border border-neutral-800/50 rounded-md p-5 transition-colors duration-200 hover:border-neutral-700/80 hover:bg-neutral-800/50;
    }



    /* Reusable nav link and label */
    .nav-link {
        @apply inline-flex items-center justify-center p-2 rounded-full text-neutral-300 hover:text-white transition-colors duration-200;
    }

    /* Reusable icon button (used in hero/footer) */
    .icon-btn {
        @apply inline-flex items-center justify-center p-2 rounded-full bg-neutral-800 text-neutral-300 hover:bg-neutral-700/50 hover:text-white transition-colors duration-200 ease-out focus:outline-none focus:ring-2 focus:ring-neutral-500/30;
    }

    /* Reusable chip/tag styles */
    .chip {
        @apply inline-flex items-center gap-2 px-2 py-1 rounded text-xs bg-neutral-300 text-neutral-800;
    }

    .chip:hover {
        @apply hover:bg-neutral-700/60 hover:text-white transition-colors duration-200 ease-out focus:outline-none focus:ring-2 focus:ring-neutral-500/30;
    }

    /* Skill chip variant - circular icon with label below */
    .skill-chip {
        @apply flex flex-col items-center gap-2;
    }

    .skill-chip__icon {
        @apply w-16 h-16 flex items-center justify-center rounded-full bg-neutral-800/20 hover:bg-neutral-700/40 transition-colors duration-200;
    }

    .skill-chip__label {
        @apply text-xs text-neutral-400 text-center;
    }

    .card .cover {
        @apply w-fit mb-4 rounded-sm h-50;
    }
}