`app/globals.css`

135 lines
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --font-inter: 'Inter', system-ui, -apple-system, sans-serif;
    --font-playfair: 'Playfair Display', Georgia, serif;

    /* Light theme CSS custom properties */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);

    /* Hero overlay for light mode */
    --hero-overlay-start: rgba(123, 35, 68, 0.9);
    --hero-overlay-end: rgba(208, 56, 98, 0.8);
  }

  /* Dark theme CSS custom properties */
  :root[data-theme="dark"],
  :root.dark {
    --bg-primary: #030712;
    --bg-secondary: #111827;
    --bg-tertiary: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --border: #374151;
    --border-light: #1f2937;
    --shadow: rgba(0, 0, 0, 0.5);
    --shadow-lg: rgba(0, 0, 0, 0.7);

    /* Hero overlay for dark mode - slightly darker for better contrast */
    --hero-overlay-start: rgba(91, 26, 51, 0.95);
    --hero-overlay-end: rgba(174, 40, 81, 0.9);
  }

  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    @apply transition-colors duration-300;
  }

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

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

  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900;
  }

  .section-padding {
    @apply py-16 md:py-24;
  }

  .heading-xl {
    @apply text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight;
  }

  .heading-lg {
    @apply text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight;
  }

  .heading-md {
    @apply text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight;
  }

  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-gray-900/30 overflow-hidden transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-900/50 hover:-translate-y-1;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

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

/* Image loading animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.animate-shimmer {
  animation: shimmer 2s infinite linear;
  background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-size: 1000px 100%;
}

.dark .animate-shimmer {
  background: linear-gradient(to right, #1f2937 0%, #374151 20%, #1f2937 40%, #1f2937 100%);
  background-size: 1000px 100%;
}

/* Dark mode image overlay for better contrast */
.dark .dark-image-overlay {
  position: relative;
}

.dark .dark-image-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}