/* Non-critical styles - loaded asynchronously */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Extended color palette */
    --card: 30 15% 96%;
    --card-foreground: 220 25% 12%;
    --popover: 30 15% 96%;
    --popover-foreground: 220 25% 12%;
    --secondary: 340 20% 70%;
    --secondary-foreground: 220 25% 12%;
    --muted: 320 15% 75%;
    --muted-foreground: 220 15% 45%;
    --accent: 43 35% 65%;
    --accent-foreground: 220 25% 12%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 30 20% 88%;
    --input: 30 20% 88%;
    --ring: 220 25% 12%;
    --warm-cream: 30 15% 96%;
    --deep-navy: 220 25% 12%;
    --matte-gold: 43 35% 65%;
    --dusty-rose: 340 20% 70%;
    --lavender-grey: 280 20% 65%;
  }

  /* Font loading optimization to prevent CLS */
  @font-face {
    font-family: 'Cormorant Garamond';
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/cormorantgaramond/v16/co3YmX5slCNuHLi8bLeY9MK7whWMhyjQrUv0vqn1R7DJ.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }
}

/* Accessibility - non-critical */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* Extended typography */
h4 { 
  @apply text-xl md:text-2xl mb-4; 
}
h5 { 
  @apply text-lg md:text-xl mb-3; 
}
h6 { 
  @apply text-base md:text-lg mb-3; 
}

/* Layout classes */
.page-container {
  @apply min-h-screen pt-24;
}

.page-header {
  @apply max-w-4xl mx-auto text-center mb-16;
}

.page-content {
  @apply container section-padding;
}

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

/* Extended cards */
.card-elevated {
  @apply bg-background rounded-3xl p-8 shadow-2xl hover:shadow-2xl transition-all duration-700 border-2 border-beige/50 hover:border-blush-pink/60 hover:scale-[1.03] hover:-translate-y-3 hover:bg-gradient-to-br hover:from-ivory/90 hover:to-soft-gold/15 relative overflow-hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.card-elevated:hover {
  box-shadow: 0 35px 70px -12px rgba(0, 0, 0, 0.25), 0 0 40px rgba(var(--blush-pink), 0.2);
}

.card-glass {
  @apply bg-background/95 backdrop-blur-md rounded-3xl p-8 shadow-2xl hover:shadow-2xl border-2 border-beige/50 hover:border-soft-gold/60 transition-all duration-700 hover:bg-gradient-to-br hover:from-ivory/95 hover:to-soft-gold/20 hover:-translate-y-1 relative overflow-hidden;
}

/* Extended buttons */
.btn-secondary {
  @apply bg-soft-gold text-midnight-blue hover:bg-soft-gold/80 focus:bg-soft-gold/80 active:bg-soft-gold/70 transition-all duration-300 px-8 py-3 rounded-full font-sans font-semibold shadow-lg hover:shadow-xl;
}

.btn-minimal {
  @apply text-midnight-blue hover:text-blush-pink focus:text-blush-pink transition-colors duration-300 font-sans font-medium underline-offset-4 hover:underline;
}

/* Navigation */
.nav-link {
  @apply relative inline-block py-2 text-midnight-blue font-medium transition-colors duration-300 after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-midnight-blue after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
}

.active-nav-link {
  @apply after:scale-x-100 text-midnight-blue;
}

/* Service components */
.service-card {
  @apply card-elevated;
}

.service-icon {
  @apply w-12 h-12 text-blush-pink group-hover:scale-110 transition-all duration-300;
}

/* Section backgrounds */
.section-dark {
  @apply bg-midnight-blue text-ivory;
}

.section-accent {
  @apply bg-beige/30;
}

.section-soft {
  @apply bg-ivory;
}

/* Forms */
.form-input {
  @apply bg-background border border-beige focus:border-midnight-blue focus:ring-2 focus:ring-midnight-blue/20 rounded-xl px-4 py-3 outline-none transition-all duration-300 w-full font-sans;
}

.form-textarea {
  @apply bg-background border border-beige focus:border-midnight-blue focus:ring-2 focus:ring-midnight-blue/20 rounded-xl px-4 py-3 outline-none transition-all duration-300 w-full min-h-[120px] resize-y font-sans;
}

.form-label {
  @apply font-serif font-medium text-midnight-blue mb-2 block;
}

/* Effects */
.glow-effect {
  @apply shadow-lg hover:shadow-2xl hover:shadow-blush-pink/25 transition-all duration-700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .container {
    @apply px-4;
  }
  
  .section-padding {
    @apply py-12;
  }
  
  .page-header {
    @apply mb-12;
  }
  
  h1 {
    @apply text-3xl md:text-4xl;
  }
  
  h2 {
    @apply text-2xl md:text-3xl;
  }
  
  .card-standard,
  .card-elevated,
  .card-glass {
    @apply p-6;
  }
}

.glass-bg {
  @apply card-glass;
}