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

/* ===================================================================
 * 1. DEFINE VITEPRESS THEME VARIABLES
 * =================================================================== */
:root {
    /* Responsive base font size */
    font-size: clamp(1rem, 1rem + 0.5vw, 1.125rem);
    --vp-layout-max-width: 1600px;
    /* Brand Colors */
    --vp-c-brand-1: #646cff;
    --vp-c-brand-2: #747bff;
    --vp-c-brand-3: #535bf2;
    --vp-c-brand-soft: rgba(100, 108, 255, 0.14);

    /* Home Hero overrides */
    --vp-home-hero-name-color: transparent;
    --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
    --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
    --vp-home-hero-image-filter: blur(44px);
}

/* Toast notification spacing - ensure navbar doesn't overlap with fixed toast */
.VPNav {
    padding-top: var(--toast-height, 0px);
}

/* ===================================================================
 * 2. CUSTOM COMPONENT STYLES USING TAILWIND APPLIES
 * =================================================================== */

@layer base {
    /* Link styling */
    a {
        @apply no-underline font-medium transition-colors;
    }

    a:hover {
        /* Use the custom vp-brand-2 color from Tailwind config */
        @apply text-vp-brand-2;
    }

    h1 {
        @apply text-5xl font-semibold mb-6;
    }

    .VPDoc .main ul {
        @apply list-disc list-inside mb-4 mt-1 space-y-2;
    }

    .VPDoc .main ol {
        @apply list-decimal list-inside mb-4 mt-1 space-y-2;
    }

    .VPDoc .main li {
        @apply ml-4;
    }

}

@layer components {
    /* VPHomeHero image padding */
    .VPHomeHero .VPImage {
        @apply p-12 md:p-16;
    }

    /* VPFeature image sizing and centering */
    .VPFeature .VPImage {
        @apply my-6 mx-auto object-contain;
        width: clamp(40px, 5vw, 60px);
        height: clamp(40px, 5vw, 60px);
    }

    .content-container {
        @apply w-full !max-w-screen-lg;
    }

    @media (min-width: 1024px) {
        .content-container {
            @apply w-full !max-w-screen-xl !p-0;
        }
    }

    /* ------------------------------------------------------- */
    /* Custom Page Classes, applied via pageClass frontmatter */
    /* ------------------------------------------------------- */
    .wide-page .VPDoc {
        @apply w-full mx-auto !py-3 !px-4 md:px-8 max-w-screen-xl;
    }

    .wide-page .VPPage {
        @apply w-full mx-auto !py-3 !px-4 md:px-8 max-w-screen-xl;
    }

    .full-page .content-container {
        @apply w-full !max-w-screen-xl;
    }

    .full-page .VPDoc {
        @apply w-full mx-auto !py-3 !px-6 md:px-8 max-w-screen-2xl;
    }

    .full-page .VPPage {
        @apply w-full mx-auto !py-3 !px-6 md:px-8 max-w-screen-2xl;
    }

    .full-page .content-container {
        @apply w-full !max-w-screen-2xl;
    }
}
