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

/* Accommodation Website Design System - Warm, Modern Interior Design */

@layer base {
  :root {
    /* Base colors - Warm neutrals */
    --background: 32 20% 97%;
    --foreground: 20 14% 16%;

    /* Card colors - Clean whites with warm undertones */
    --card: 30 25% 98%;
    --card-foreground: 20 14% 16%;

    --popover: 30 25% 98%;
    --popover-foreground: 20 14% 16%;

    /* Primary - Dark blue-gray */
    --primary: 200 31% 24%;
    --primary-foreground: 30 25% 98%;

    /* Secondary - Bright blue */
    --secondary: 199 74% 49%;
    --secondary-foreground: 30 25% 98%;

    /* Muted - Dynamic blue tones */
    --muted: 32 20% 94%;
    --muted-foreground: 199 50% 45%;

    /* Accent - Light gray */
    --accent: 210 20% 95%;
    --accent-foreground: 20 14% 16%;

    /* Dark section colors - CONSISTENT TOKENS */
    --dark-bg: 207 31% 24%;
    --dark-text: 30 25% 98%;
    --dark-muted: 30 20% 70%;
    
    /* Legacy dark tokens for backward compatibility */
    --dark-background: 207 31% 24%;
    --dark-foreground: 30 25% 98%;

    /* Interactive elements */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 32 20% 90%;
    --input: 32 20% 94%;
    --ring: 20 14% 16%;

    --radius: 0.75rem;

    /* Hero container background */
    --hero-container: 0 0% 91%;

    /* CONSISTENT GRADIENTS */
    --gradient-warm: linear-gradient(135deg, hsl(var(--secondary) / 0.8), hsl(var(--accent)));
    --gradient-dark: linear-gradient(135deg, hsl(var(--dark-bg)), hsl(var(--primary)));
    
    /* CONSISTENT SHADOWS */
    --shadow-warm: 0 10px 30px -15px hsl(var(--foreground) / 0.1);
    --shadow-card: 0 4px 20px -8px hsl(var(--foreground) / 0.08);
    --shadow-elevated: 0 20px 40px -20px hsl(var(--foreground) / 0.15);
    
    /* CONSISTENT ANIMATIONS */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
}

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

  body {
    @apply bg-background text-foreground font-sans;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-medium tracking-tight;
    font-family: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
  }

  /* CONSISTENT TYPOGRAPHY SCALES */
  .text-hero {
    @apply text-5xl md:text-6xl lg:text-7xl font-light leading-[0.9] tracking-tight;
  }

  .text-section-title {
    @apply text-3xl md:text-4xl lg:text-5xl font-light tracking-tight;
  }

  .text-large {
    @apply text-xl lg:text-2xl leading-relaxed;
  }

  /* CONSISTENT BUTTON STYLES */
  .btn-primary {
    @apply bg-primary text-primary-foreground hover:bg-primary/90 px-8 py-3 rounded-lg font-medium transition-all duration-300 hover:shadow-lg;
  }

  .btn-secondary {
    @apply bg-accent text-accent-foreground border border-border hover:bg-secondary hover:text-white px-8 py-3 rounded-lg font-medium transition-all duration-300;
  }

  .btn-accent {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/90 px-8 py-3 rounded-lg font-medium transition-all duration-300 hover:shadow-lg hover:shadow-secondary/25;
  }

  /* CONSISTENT CARD STYLES */
  .card-elevated {
    @apply bg-card rounded-2xl shadow-[var(--shadow-card)] border border-border/50;
  }

  /* CONSISTENT SECTION STYLES */
  .section-padding {
    @apply py-16 lg:py-24;
  }

  .section-dark {
    @apply bg-[hsl(var(--dark-bg))] text-[hsl(var(--dark-text))];
  }

  .text-dark-muted {
    @apply text-[hsl(var(--dark-muted))];
  }

  /* CONSISTENT CONTAINER STYLES */
  .container-padding {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .container-narrow {
    @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* CONSISTENT SPACING */
  .spacing-section {
    @apply space-y-8;
  }

  .spacing-content {
    @apply space-y-6;
  }

  .spacing-small {
    @apply space-y-4;
  }

  /* GRADIENTS */
  .gradient-warm {
    background: var(--gradient-warm);
  }

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