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

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

/* ===========================================
   DESIGN SYSTEM — ZoukLambadaBCN Event
   Tropical palette: orange, pink, violet
   All colors in HSL
=========================================== */

@layer base {
  :root {
    /* Paleta: Beachy, Sandy, Warm Orange */
    --background: 40 40% 94%; /* Sandy beach */
    --foreground: 25 40% 25%; /* Warm dark brown/orange */

    --card: 40 50% 98%; /* Light sand */
    --card-foreground: 25 40% 25%;

    --popover: 40 50% 98%;
    --popover-foreground: 25 40% 25%;

    /* Primary: Vibrant Orange */
    --primary: 20 90% 55%;
    --primary-foreground: 0 0% 100%;

    /* Secondary: Golden Orange */
    --secondary: 35 90% 50%;
    --secondary-foreground: 0 0% 100%;

    /* Accent: Warm Peach */
    --accent: 25 80% 80%;
    --accent-foreground: 25 40% 25%;

    --muted: 40 30% 85%;
    --muted-foreground: 25 30% 45%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 40 25% 82%;
    --input: 40 25% 82%;
    --ring: 20 90% 55%;

    --radius: 0.75rem;

    /* Custom tokens */
    --gradient-tropical: linear-gradient(135deg, hsla(15, 90%, 55%, 0.9), hsla(30, 90%, 55%, 0.8), hsl(45, 90%, 50%));
    --gradient-warm: linear-gradient(180deg, hsl(40 40% 94%), hsl(40 30% 85%));
    --shadow-glow: 0 0 40px hsl(20 90% 55% / 0.3);
    --shadow-card: 0 8px 30px hsl(25 40% 25% / 0.08);
    --shadow-elevated: 0 20px 50px hsl(25 40% 25% / 0.12);
    /* Sidebar (unused but required) */
    --sidebar-background: 40 50% 98%;
    --sidebar-foreground: 25 40% 25%;
    --sidebar-primary: 20 90% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 40 30% 90%;
    --sidebar-accent-foreground: 25 40% 25%;
    --sidebar-border: 40 25% 82%;
    --sidebar-ring: 20 90% 55%;
  }

  .dark {
    --background: 35 25% 12%; /* Dark beach night */
    --foreground: 30 50% 96%;
    --card: 35 20% 15%;
    --card-foreground: 30 50% 96%;
    --popover: 35 20% 15%;
    --popover-foreground: 30 50% 96%;
    --primary: 20 90% 60%;
    --primary-foreground: 30 90% 10%;
    --secondary: 35 90% 55%;
    --secondary-foreground: 30 90% 10%;
    --accent: 25 60% 30%;
    --accent-foreground: 30 50% 96%;
    --muted: 35 20% 22%;
    --muted-foreground: 30 30% 70%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;
    --border: 35 20% 25%;
    --input: 35 20% 25%;
    --ring: 20 90% 60%;
    --sidebar-background: 35 20% 15%;
    --sidebar-foreground: 30 50% 96%;
    --sidebar-primary: 20 90% 60%;
    --sidebar-primary-foreground: 30 90% 10%;
    --sidebar-accent: 35 20% 22%;
    --sidebar-accent-foreground: 30 50% 96%;
    --sidebar-border: 35 20% 25%;
    --sidebar-ring: 20 90% 60%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

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

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

  /* Smooth scroll */
  html {
    scroll-behavior: smooth;
  }
}

@layer components {
  /* Tropical gradient text */
  .text-gradient {
    background: var(--gradient-tropical);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Tropical gradient background */
  .bg-gradient-tropical {
    background: var(--gradient-tropical);
  }

  /* Glow effect for buttons */
  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }

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

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

  /* Section padding utility */
  .section-padding {
    @apply px-4 py-16 md:px-8 md:py-24 lg:px-16;
  }
}