/**
 * Gemeinsame Styles für alle Frontend-Themes
 * Diese Datei wird von allen Web-Themes importiert
 */
@import "tailwindcss";

/* Definiere wo Tailwind nach Klassen suchen soll */
@source "../../views/web";
@source "../../views/layouts/web";
@source "../../views/livewire/web";
@source "../../views/components/web";

/* Tailwind Base Layer für gemeinsame Elemente */
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }

    body {
        @apply font-sans antialiased;
    }

    /* Typography Defaults */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-bold leading-tight;
    }

    h1 {
        @apply text-4xl md:text-5xl;
    }

    h2 {
        @apply text-3xl md:text-4xl;
    }

    h3 {
        @apply text-2xl md:text-3xl;
    }

    h4 {
        @apply text-xl md:text-2xl;
    }

    h5 {
        @apply text-lg md:text-xl;
    }

    h6 {
        @apply text-base md:text-lg;
    }

    /* Link Styles */
    a {
        @apply transition-colors duration-200;
    }

    /* Focus Styles */
    :focus-visible {
        @apply outline-none ring-2 ring-offset-2;
    }
}

/* Gemeinsame Component Styles */
@layer components {
    /* Button Base Styles */
    .btn {
        @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200;
        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
    }

    /* Card Styles */
    .card {
        @apply bg-white rounded-lg shadow-md overflow-hidden;
    }

    /* Container */
    .container-custom {
        @apply container mx-auto px-4 sm:px-6 lg:px-8;
    }

    /* Section Spacing */
    .section {
        @apply py-12 md:py-16 lg:py-20;
    }
}

/* Utility Classes */
@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}