/* Custom CSS based on Tailwind config */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");

:root {
    --background: 209 40% 96%;
    --foreground: 222 47% 11%;
    --card: 210 40% 98%;
    --card-foreground: 222 47% 11%;
    --popover: 214 31% 91%;
    --popover-foreground: 222 47% 11%;
    --primary: 200 98% 39%;
    --primary-foreground: 204 100% 97%;
    --primary-glow: 199 89% 60%;
    --secondary: 215 24% 26%;
    --secondary-foreground: 210 40% 98%;
    --muted: 215 20% 65%;
    --muted-foreground: 222 47% 11%;
    --accent: 210 40% 98%;
    --accent-foreground: 215 19% 34%;
    --destructive: 0 72% 50%;
    --destructive-foreground: 0 85% 97%;
    --border: 212 26% 83%;
    --input: 212 26% 83%;
    --ring: 200 98% 39%;
    --radius: 0.5rem;

    /* Custom travel colors */
    --sky-start: 199 89% 48%;
    --sky-end: 217 91% 60%;
    --coral: 12 76% 61%;
    --coral-light: 12 76% 70%;
    --ocean: 199 89% 42%;
    --sand: 39 77% 83%;

    /* Gradients */
    --gradient-sky: linear-gradient(135deg, hsl(199 89% 48%) 0%, hsl(217 91% 60%) 100%);
    --gradient-hero: linear-gradient(180deg, hsl(210 20% 98%) 0%, hsl(199 89% 95%) 100%);
    --gradient-coral: linear-gradient(135deg, hsl(12 76% 61%) 0%, hsl(24 82% 65%) 100%);

    /* Shadows */
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
    --shadow-glow: 0 0 40px hsl(199 89% 48% / 0.3);
    --shadow-card: 0 4px 20px hsl(222 47% 11% / 0.08);
}

.dark {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    --card: 217 32% 17%;
    --card-foreground: 210 40% 98%;
    --popover: 215 24% 26%;
    --popover-foreground: 210 40% 98%;
    --primary: 198 93% 59%;
    --primary-foreground: 204 80% 15%;
    --secondary: 212 26% 83%;
    --secondary-foreground: 228 84% 4%;
    --muted: 215 16% 46%;
    --muted-foreground: 210 40% 98%;
    --accent: 228 84% 4%;
    --accent-foreground: 215 20% 65%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 85% 97%;
    --border: 215 19% 34%;
    --input: 215 19% 34%;
    --ring: 198 93% 59%;
    --gradient-hero: linear-gradient(180deg, hsl(222 47% 8%) 0%, hsl(222 47% 12%) 100%);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Utilities */
.gradient-sky {
    background: var(--gradient-sky);
}

.gradient-hero {
    background: var(--gradient-hero);
}

.gradient-coral {
    background: var(--gradient-coral);
}

.shadow-card {
    box-shadow: var(--shadow-card);
}

.shadow-glow {
    box-shadow: var(--shadow-glow);
}

.text-gradient {
    background: var(--gradient-sky);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

/* Custom Tab hidden logic */
/* Custom Tab hidden logic removed to rely on Tailwind hidden utility */