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

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply antialiased subpixel-antialiased bg-pageBg text-bodyText;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply text-brandNavy;
    }

    a {
        @apply text-brandNavy transition-all duration-300;
        text-decoration: none;
    }

    a:hover {
        @apply text-brandCrimson;
    }
}

@layer components {
    .glass-nav {
        @apply bg-white/70 backdrop-blur-lg border-b border-borderColor dark:bg-darkTheme/50 dark:border-white/10;
    }

    .premium-card {
        @apply bg-white/40 backdrop-blur-sm border border-borderColor rounded-3xl transition-all duration-500 dark:bg-white/5 dark:border-white/10;
    }

    .btn-cta {
        @apply px-12 py-4 rounded-full bg-brandCrimson text-white font-bold hover:bg-brandNavy hover:text-white hover:-translate-y-1 active:scale-95 transition-all duration-300 flex items-center justify-center gap-2 self-stretch sm:self-auto;
    }

    .btn-outline {
        @apply px-12 py-4 rounded-full border-2 border-brandNavy text-brandNavy font-bold transition-all duration-300 flex items-center justify-center gap-3 active:scale-95 self-stretch sm:self-auto hover:bg-brandNavy hover:text-white;
    }
}

.text-stroke {
    -webkit-text-stroke: 1px rgba(100, 100, 100, 0.2);
    color: transparent;
}

.bg-pattern {
    background-image: radial-gradient(#E2E2E2 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.1;
}