@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lato:wght@300;400;700&display=swap');

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

@layer base {
    :root {
        --background: 330 20% 95%;
        --foreground: 330 30% 12%;
        --card: 330 18% 91%;
        --card-foreground: 330 30% 12%;
        --popover: 330 20% 95%;
        --popover-foreground: 330 30% 12%;
        --primary: 330 80% 50%;
        --primary-foreground: 0 0% 100%;
        --secondary: 330 15% 88%;
        --secondary-foreground: 330 30% 12%;
        --accent: 330 100% 60%;
        --accent-foreground: 0 0% 100%;
        --muted: 330 12% 85%;
        --muted-foreground: 330 10% 45%;
        --border: 330 15% 82%;
        --input: 330 15% 82%;
        --ring: 330 80% 50%;
        --lavender: 330 80% 50%;
        --lavender-light: 330 60% 72%;
        --lavender-dark: 320 50% 20%;
        --dark: 320 60% 8%;
        --dark-card: 320 50% 12%;
        --cream: 330 20% 92%;
        --nav-bg: 320 55% 10%;
    }

    [x-cloak] {
        display: none !important;
    }

    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground font-sans antialiased;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-display;
    }
}

@layer components {
    .lunara-shell {
        @apply container mx-auto px-4;
    }

    .lunara-card {
        @apply rounded-3xl border border-white/10 bg-dark-card/80 shadow-[0_20px_60px_rgba(0,0,0,0.28)] backdrop-blur;
    }

    .lunara-admin-input {
        @apply mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-cream placeholder:text-cream/35 focus:border-accent/60 focus:outline-none focus:ring-2 focus:ring-accent/20;
    }

    .lunara-admin-textarea {
        @apply lunara-admin-input min-h-32;
    }

    .lunara-label {
        @apply text-sm font-medium text-cream/80;
    }

    .lunara-button {
        @apply inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-medium uppercase tracking-[0.18em] transition;
    }

    .lunara-button-primary {
        @apply lunara-button bg-accent text-accent-foreground hover:bg-accent/90;
    }

    .lunara-button-secondary {
        @apply lunara-button border border-accent/40 bg-transparent text-accent hover:bg-accent/10;
    }

    .lunara-page-hero {
        @apply relative flex min-h-[60vh] items-center justify-center overflow-hidden px-4 pb-16 pt-28 md:min-h-[66vh] md:pt-32;
    }

    .lunara-page-hero-panel {
        @apply relative z-10 mx-auto max-w-5xl text-center;
    }

    .lunara-page-kicker {
        @apply mb-4 text-xs uppercase tracking-[0.34em] text-white/75 md:text-sm;
    }

    .lunara-page-title {
        @apply text-4xl leading-tight text-cream md:text-5xl lg:text-6xl;
    }

    .lunara-page-subtitle {
        @apply mx-auto mt-6 max-w-3xl text-base leading-8 text-cream/65 md:text-lg;
    }

    .lunara-page-breadcrumb {
        @apply mb-8 flex items-center justify-center gap-2 text-[11px] uppercase tracking-[0.24em] text-cream/60 md:text-xs;
    }

    .lunara-page-chip {
        @apply inline-flex items-center rounded-full border border-white/10 bg-white/5 px-4 py-2 text-[11px] uppercase tracking-[0.18em] text-cream/75 backdrop-blur;
    }

    .lunara-section-intro {
        @apply mx-auto mb-16 max-w-3xl text-center;
    }

    .lunara-eyebrow {
        @apply mb-3 text-xs uppercase tracking-[0.25em] text-accent/70;
    }

    .lunara-section-title {
        @apply text-3xl text-cream md:text-4xl;
    }

    .lunara-section-copy {
        @apply mx-auto mt-6 max-w-2xl text-base leading-8 text-cream/60;
    }

    .lunara-glass-panel {
        @apply rounded-[2rem] border border-white/10 bg-white/5 shadow-[0_18px_48px_rgba(0,0,0,0.18)] backdrop-blur;
    }
}

@layer utilities {
    .bg-dark {
        background-color: hsl(var(--dark));
    }

    .bg-dark-card {
        background-color: hsl(var(--dark-card));
    }

    .text-cream {
        color: hsl(var(--cream));
    }
}