@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: Egyptian Blue, Slate Indigo, Baby Blue Ice, Dark Amethyst, Dusty Grape */
    --background: 225 30% 96%;
    --foreground: 260 32% 24%;

    --card: 225 25% 94%;
    --card-foreground: 260 32% 24%;

    --popover: 0 0% 100%;
    --popover-foreground: 260 32% 24%;

    /* Primary: Egyptian Blue */
    --primary: 231 66% 37%;
    --primary-foreground: 0 0% 100%;

    /* Secondary: Slate Indigo */
    --secondary: 225 34% 48%;
    --secondary-foreground: 0 0% 100%;

    /* Accent: Baby Blue Ice */
    --accent: 220 81% 75%;
    --accent-foreground: 260 32% 24%;

    --muted: 225 20% 90%;
    --muted-foreground: 227 20% 42%;

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

    --border: 225 20% 85%;
    --input: 225 20% 85%;
    --ring: 231 66% 37%;

    --radius: 0.75rem;

    /* Custom tokens */
    --gradient-tropical: linear-gradient(135deg, hsla(28.2, 80.4%, 44.1%, 0.91), hsla(27.1, 88.4%, 37.3%, 0.76), hsl(22.3, 95.5%, 56.9%));
    --gradient-warm: linear-gradient(180deg, hsl(225 30% 96%), hsl(225 25% 92%));
    --shadow-glow: 0 0 40px hsl(231 66% 37% / 0.3);
    --shadow-card: 0 8px 30px hsl(260 32% 24% / 0.08);
    --shadow-elevated: 0 20px 50px hsl(260 32% 24% / 0.12);
    /* Sidebar (unused but required) */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 260 30% 8%;
    --foreground: 220 81% 90%;
    --card: 260 28% 12%;
    --card-foreground: 220 81% 90%;
    --popover: 260 28% 12%;
    --popover-foreground: 220 81% 90%;
    --primary: 220 81% 75%;
    --primary-foreground: 260 32% 24%;
    --secondary: 225 34% 48%;
    --secondary-foreground: 0 0% 100%;
    --accent: 231 66% 45%;
    --accent-foreground: 0 0% 100%;
    --muted: 260 20% 18%;
    --muted-foreground: 225 20% 65%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;
    --border: 260 15% 20%;
    --input: 260 15% 20%;
    --ring: 220 81% 75%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@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;
  }
}
