@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 oscura por defecto: Egyptian Blue, Slate Indigo, Baby Blue Ice, Dark Amethyst, Dusty Grape */
    --background: 260 30% 8%;
    --foreground: 220 60% 92%;

    --card: 260 28% 12%;
    --card-foreground: 220 60% 92%;

    --popover: 260 28% 14%;
    --popover-foreground: 220 60% 92%;

    /* Primary: Baby Blue Ice */
    --primary: 220 81% 75%;
    --primary-foreground: 260 32% 12%;

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

    /* Accent: Egyptian Blue */
    --accent: 231 66% 42%;
    --accent-foreground: 0 0% 100%;

    --muted: 260 20% 16%;
    --muted-foreground: 225 20% 65%;

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

    --border: 260 18% 18%;
    --input: 260 18% 18%;
    --ring: 220 81% 75%;

    --radius: 0.75rem;

    /* Custom tokens */
    --gradient-tropical: linear-gradient(135deg, hsl(231 66% 37%), hsl(225 34% 48%), hsl(220 81% 75%));
    --gradient-warm: linear-gradient(180deg, hsl(260 30% 8%), hsl(260 28% 12%));
    --shadow-glow: 0 0 40px hsl(220 81% 75% / 0.25);
    --shadow-card: 0 8px 30px hsl(0 0% 0% / 0.3);
    --shadow-elevated: 0 20px 50px hsl(0 0% 0% / 0.4);
    /* 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;
  }
}