@import "https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-text-size-adjust: 100%;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family:
            "Ubuntu",
            system-ui,
            -apple-system,
            sans-serif;
    }
}

@layer components {
    .poker-card {
        @apply relative w-16 h-22 bg-white rounded-lg shadow-lg border border-gray-200 transform transition-all duration-300;
    }

    .poker-card:hover {
        @apply shadow-xl scale-105;
    }

    .poker-chip {
        @apply relative w-12 h-12 rounded-full border-4 border-white shadow-lg transform transition-all duration-300;
    }

    .poker-chip-red {
        @apply poker-chip bg-gradient-to-br from-red-500 to-red-700;
    }

    .poker-chip-blue {
        @apply poker-chip bg-gradient-to-br from-blue-500 to-blue-700;
    }

    .poker-chip-green {
        @apply poker-chip bg-gradient-to-br from-green-500 to-green-700;
    }

    .poker-chip-black {
        @apply poker-chip bg-gradient-to-br from-gray-800 to-black;
    }

    .glass-card {
        @apply backdrop-blur-md bg-white/10 border border-white/20 rounded-xl shadow-xl;
    }

    .gradient-text {
        @apply bg-gradient-to-r from-poker-gold-400 to-poker-gold-600 bg-clip-text text-transparent;
    }

    .poker-table {
        background: radial-gradient(
            ellipse at center,
            #0f5132 0%,
            #052e16 100%
        );
        @apply rounded-full border-8 border-amber-800 shadow-2xl;
    }

    .nav-link {
        @apply relative text-white/80 hover:text-white transition-all duration-300 font-medium;
    }

    .nav-link::after {
        content: "";
        @apply absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-poker-gold-400 to-poker-gold-600 transition-all duration-300;
    }

    .nav-link:hover::after {
        @apply w-full;
    }

    .btn-primary {
        @apply bg-transparent hover:bg-white hover:bg-opacity-10 text-white font-semibold py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300;
        background-color: transparent !important;
        color: white !important;
        border: 2px solid white;
    }

    .btn-secondary {
        @apply bg-gradient-to-r from-berkeley-blue-500 to-berkeley-blue-600 hover:from-berkeley-blue-600 hover:to-berkeley-blue-700 text-white font-semibold py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300;
    }

    .section-padding {
        @apply py-20 px-4 sm:px-6 lg:px-8;
    }

    .container-custom {
        @apply max-w-7xl mx-auto;
    }
}