/* styles.css */

/* 1. TAILWIND DIRECTIVES */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 2. BASE LAYER & DESIGN SYSTEM */
@layer base {
  :root {
    /* Colors - Inspired by modern, elegant Italian cuisine */
    --color-primary: #8C3838; /* A warm, deep terracotta red */
    --color-primary-dark: #6B2B2B;
    --color-secondary: #D4AF37; /* A muted gold for accents */
    --color-dark: #1a1a1a; /* Off-black for text and dark backgrounds */
    --color-light: #F8F5F2; /* A warm, creamy off-white */
    --color-gray: #6c757d;

    /* Typography */
    --font-serif: 'Playfair Display', serif; /* For headings */
    --font-sans: 'Lato', sans-serif; /* For body text */

    /* Transitions */
    --transition-fast: all 0.2s ease-in-out;
  }

  /* Apply base styles */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Offset for sticky header */
  }

  body {
    @apply font-sans text-dark bg-light antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-serif font-bold;
  }

  h1 {
    @apply text-5xl md:text-7xl;
  }

  h2 {
    @apply text-4xl md:text-5xl; /* Section titles */
  }

  h3 {
    @apply text-2xl md:text-3xl;
  }

  p {
    @apply leading-relaxed text-base text-gray;
  }

  a {
    @apply text-primary transition-colors duration-200;
  }
  a:hover {
    @apply text-primary-dark;
  }
}

/* 3. COMPONENT LAYER */
@layer components {
  /* Layout Utilities */
  .container {
    @apply w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Section Base Styles */
  .section {
    @apply py-16 md:py-24;
  }

  .section-title {
    @apply text-center mb-12;
  }

  /* Buttons */
  .btn {
    @apply inline-block font-bold text-center uppercase tracking-wider py-3 px-8 rounded-sm transition-transform duration-200 ease-in-out;
  }

  .btn:hover {
    @apply transform -translate-y-1;
  }

  .btn-primary {
    @apply bg-primary text-white;
  }
  .btn-primary:hover {
    @apply bg-primary-dark text-white;
  }

  .btn-secondary {
    @apply bg-transparent text-white border-2 border-white;
  }
  .btn-secondary:hover {
    @apply bg-white text-dark;
  }

  /* Header */
  .header {
    @apply fixed top-0 left-0 right-0 z-50 py-4 transition-all duration-300;
  }
  .header.scrolled {
    @apply bg-white shadow-md py-3;
  }
  .header.scrolled .nav-link {
    @apply text-dark;
  }
  .header.scrolled .nav-link:hover {
    @apply text-primary;
  }
  .header.scrolled .logo {
    @apply text-dark;
  }

  .nav-link {
    @apply text-white font-semibold tracking-wide uppercase text-sm mx-4 transition-colors duration-200;
  }
  .nav-link:hover {
    @apply text-secondary;
  }

  /* Footer */
  .footer {
    @apply bg-dark text-light py-8;
  }
  .footer a {
    @apply text-gray hover:text-white;
  }

  /* Gallery Lightbox */
  .lightbox {
    @apply hidden fixed inset-0 bg-black bg-opacity-80 z-50;
    @apply flex items-center justify-center p-4;
  }
  .lightbox.active {
    @apply flex;
  }
  .lightbox-content {
    @apply relative max-w-4xl max-h-full;
  }
  .lightbox-img {
    @apply max-w-full max-h-[90vh] object-contain;
  }
  .lightbox-close {
    @apply absolute -top-2 -right-2 h-10 w-10 bg-white text-dark rounded-full;
    @apply flex items-center justify-center text-2xl font-bold cursor-pointer;
  }
  .lightbox-close:hover {
    @apply bg-primary text-white;
  }
}