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

/*
  Custom styles for Cassidy & Jake wedding site
  Philosophy: Clean white base with warm accent colors
*/

@layer base {
  /* Typography improvements */
  body {
    @apply antialiased bg-white;
    font-feature-settings: "kern" 1, "liga" 1;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display text-chocolate;
  }

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

  /* OVERRIDE DaisyUI theme with PURE WHITE backgrounds */
  [data-theme="cassidyjake"] {
    --color-base-100: #ffffff !important;
    --color-base-200: #ffffff !important;
    --color-base-300: #E5E7EB !important;
    --color-base-content: #1f2937 !important;
  }
}

@layer components {
  /* Custom card with subtle warmth */
  .card-warm {
    @apply bg-white shadow-md hover:shadow-lg transition-shadow duration-300;
    @apply border border-wheat/20;
  }

  /* Elegant section divider */
  .section-divider {
    @apply border-t border-wheat/30;
  }

  /* Link styling with wedding colors */
  .link-wedding {
    @apply text-chocolate hover:text-peach transition-colors duration-200;
    @apply underline-offset-4 hover:underline;
  }

  /* Hero overlay for legibility */
  .hero-overlay-wedding {
    @apply absolute inset-0;
    background: linear-gradient(to bottom, rgba(104, 70, 39, 0.3), rgba(104, 70, 39, 0.1));
  }

  /* Subtle background accent - REMOVED CREAM TONES */
  .bg-accent-subtle {
    @apply bg-white;
  }

  /* Focus states for accessibility */
  .btn:focus-visible,
  .link:focus-visible,
  a:focus-visible {
    @apply outline-2 outline-offset-2 outline-chocolate/50;
  }

  /* Custom button variant - ghost with wedding colors */
  .btn-wedding-ghost {
    @apply bg-transparent border border-chocolate/30 text-chocolate;
    @apply hover:bg-wheat/20 hover:border-chocolate/50;
    @apply transition-all duration-200;
  }

  /* Refined primary button */
  .btn-primary {
    @apply bg-chocolate text-white border-chocolate;
    @apply hover:bg-peach hover:border-peach;
    @apply active:scale-98;
  }
}

@layer utilities {
  /* Text color utilities for wedding palette */
  .text-chocolate {
    color: #684627;
  }

  .text-peach {
    color: #DAA38F;
  }

  .text-wheat {
    color: #DFC49B;
  }

  .text-coffee {
    color: #9B7D61;
  }

  /* Background utilities with opacity support */
  .bg-chocolate {
    background-color: #684627;
  }

  .bg-peach {
    background-color: #DAA38F;
  }

  .bg-wheat {
    background-color: #DFC49B;
  }

  .bg-coffee {
    background-color: #9B7D61;
  }

  .bg-cream {
    background-color: #FED8A6;
  }

  /* Border utilities */
  .border-chocolate {
    border-color: #684627;
  }

  .border-wheat {
    border-color: #DFC49B;
  }

  /* Gradient backgrounds for sections - PURE WHITE */
  .bg-gradient-warm {
    background: #ffffff;
  }

  .bg-gradient-subtle-cream {
    background: #ffffff;
  }
}

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }

  body {
    @apply text-black bg-white;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */