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

/* =====================================================
   LUXURY AESTHETICS CLINIC - Refined Premium Design
   
   Color Strategy (Improved Contrast):
   - Navy (#2c4a5c): Navigation, headers, dark accents
   - Gold/Accent (#D58D72): CTAs with WHITE text for contrast
   - Charcoal (#3a3a3a): Body text for readability
   - Warm tones: Backgrounds, soft accents
   
   Key Improvements:
   - White text on gold buttons (better contrast)
   - Softer shadows and hover states
   - Reduced pattern opacity
   - Smoother section transitions
===================================================== */

@layer base {
  :root {
    /* NAVY - Navigation & Headers */
    --color-navy: #2c4a5c;
    --color-navy-dark: #1e3644;
    --color-navy-light: #3a5a6c;
    
    /* GOLD - CTAs & Highlights */
    --color-gold: #D58D72;
    --color-gold-dark: #c67a5f;
    --color-gold-light: #e1a58d;
    
    /* CHARCOAL - Primary Text */
    --color-charcoal: #3a3a3a;
    --color-charcoal-dark: #2a2a2a;
    --color-charcoal-light: #5a5a5a;
    
    /* CLIENT'S BRAND COLORS */
    --color-gray: #e6e6e6;
    --color-secondary: #e7c3b3;
    --color-secondary-light: #f0d5c9;
    --color-accent: #d58d72;
    --color-accent-light: #e1a58d;
    --color-blush: #e4bbaa;
    --color-beige: #ebd5cb;
    --color-cream: #fffaf7;
    --color-black: #050505;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Montserrat', sans-serif;
    color: #3a3a3a;
    background-color: #fffaf7;
    letter-spacing: 0.01em;
  }
  
  /* Typography - Refined Hierarchy */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    color: #2c4a5c;
  }
  
  h1 {
    font-size: 3.5rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
  }
  
  h2 {
    font-size: 2.75rem;
    line-height: 1.12;
    letter-spacing: -0.015em;
  }
  
  h3 {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  
  h4 {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  
  h5 {
    font-size: 1.25rem;
    line-height: 1.35;
  }
  
  h6 {
    font-size: 1.125rem;
    line-height: 1.4;
  }
  
  p {
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: #5a5a5a;
  }
  
  button {
    font-family: 'Montserrat', sans-serif;
  }
}

@layer components {
  /* =====================================================
     BUTTONS - Refined Luxury Hierarchy
     
     Primary: Gold solid with WHITE text (best contrast)
     Secondary: Navy solid with white text
     Tertiary: Outlined styles
     
     All buttons: Softer shadows, refined animations
  ===================================================== */
  
  /* GOLD PRIMARY - Main CTAs (Book, Buy, Subscribe) */
  .btn-gold {
    @apply px-8 py-3.5 text-white text-sm font-semibold tracking-[0.12em] rounded transition-all duration-300;
    background-color: #D58D72;
  }
  
  .btn-gold:hover {
    background-color: #c67a5f;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px rgba(213, 141, 114, 0.4);
  }
  
  /* GOLD PRIMARY LARGE - Hero sections */
  .btn-gold-lg {
    @apply px-10 py-4 text-white text-base font-semibold tracking-[0.12em] rounded transition-all duration-300;
    background-color: #D58D72;
  }
  
  .btn-gold-lg:hover {
    background-color: #c67a5f;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(213, 141, 114, 0.4);
  }
  
  /* NAVY SECONDARY - Alternative prominent actions */
  .btn-navy {
    @apply px-8 py-3.5 text-white text-sm font-semibold tracking-[0.1em] rounded transition-all duration-300;
    background-color: #2c4a5c;
  }
  
  .btn-navy:hover {
    background-color: #1e3644;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px rgba(44, 74, 92, 0.35);
  }
  
  /* Aliases */
  .btn-primary {
    @apply px-8 py-3.5 text-white text-sm font-semibold tracking-[0.12em] rounded transition-all duration-300;
    background-color: #D58D72;
  }
  
  .btn-primary:hover {
    background-color: #c67a5f;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px rgba(213, 141, 114, 0.4);
  }
  
  .btn-primary-lg {
    @apply px-10 py-4 text-white text-base font-semibold tracking-[0.12em] rounded transition-all duration-300;
    background-color: #D58D72;
  }
  
  .btn-primary-lg:hover {
    background-color: #c67a5f;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(213, 141, 114, 0.4);
  }
  
  .btn-accent {
    @apply px-8 py-3.5 text-white text-sm font-semibold tracking-[0.12em] rounded transition-all duration-300;
    background-color: #D58D72;
  }
  
  .btn-accent:hover {
    background-color: #c67a5f;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px rgba(213, 141, 114, 0.4);
  }
  
  /* SECONDARY - Softer actions */
  .btn-secondary {
    @apply px-8 py-3.5 text-navy text-sm font-semibold tracking-[0.08em] rounded transition-all duration-300 bg-secondary hover:bg-blush;
  }
  
  /* OUTLINE BUTTONS - Clean, minimal */
  .btn-outline {
    @apply px-8 py-3 text-sm font-semibold tracking-[0.1em] rounded border-2 border-navy/30 text-navy transition-all duration-300 bg-transparent hover:border-navy hover:bg-navy hover:text-white;
  }
  
  .btn-outline-gold {
    @apply px-8 py-3 text-sm font-semibold tracking-[0.1em] rounded border-2 border-gold text-gold transition-all duration-300 bg-transparent hover:bg-gold hover:text-white;
  }
  
  .btn-outline-navy {
    @apply px-8 py-3 text-sm font-semibold tracking-[0.1em] rounded border-2 border-navy text-navy transition-all duration-300 bg-transparent hover:bg-navy hover:text-white;
  }
  
  /* WHITE BUTTON - For dark backgrounds */
  .btn-white {
    @apply px-8 py-3.5 text-sm font-semibold tracking-[0.1em] rounded bg-white text-navy transition-all duration-300;
  }
  
  .btn-white:hover {
    background-color: #f5e6df;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px rgba(255, 255, 255, 0.3);
  }
  
  /* =====================================================
     NAVIGATION - Clean & Refined
  ===================================================== */
  
  .nav-link {
    @apply relative text-white/85 text-sm font-medium transition-all duration-300 hover:text-white;
    letter-spacing: 0.04em;
  }
  
  .nav-link::after {
    content: '';
    @apply absolute left-0 -bottom-1 w-0 h-0.5 bg-gold transition-all duration-300 ease-out;
  }
  
  .nav-link:hover::after {
    @apply w-full;
  }
  
  /* Navigation CTA - Refined outline style */
  .btn-nav {
    @apply px-5 py-2 text-xs font-semibold tracking-[0.12em] rounded transition-all duration-300 border border-gold/70 text-gold bg-transparent hover:bg-gold hover:text-white hover:border-gold;
  }
  
  /* =====================================================
     LINKS - Elegant hover states
  ===================================================== */
  
  .link-primary {
    @apply inline-flex items-center text-sm font-semibold tracking-[0.08em] text-gold transition-all duration-300 hover:text-navy;
  }
  
  .link-secondary {
    @apply text-sm font-medium text-navy transition-colors duration-300 hover:text-gold;
  }
  
  .link-underline {
    @apply relative text-navy font-medium;
  }
  
  .link-underline::after {
    content: '';
    @apply absolute left-0 bottom-0 w-full h-px bg-gold transform scale-x-0 transition-transform duration-300 origin-left;
  }
  
  .link-underline:hover::after {
    @apply scale-x-100;
  }
  
  /* =====================================================
     CARDS - Refined shadows and hover
  ===================================================== */
  
  .card-luxury {
    @apply bg-white rounded-xl transition-all duration-300;
    box-shadow: 0 4px 20px -4px rgba(44, 74, 92, 0.08);
  }
  
  .card-luxury:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px -8px rgba(44, 74, 92, 0.12);
  }
  
  .card-luxury-sm {
    @apply bg-white rounded-lg transition-all duration-300;
    box-shadow: 0 2px 12px -2px rgba(44, 74, 92, 0.06);
  }
  
  .card-luxury-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -6px rgba(44, 74, 92, 0.1);
  }
  
  /* Testimonial Card */
  .testimonial-card {
    @apply bg-white rounded-xl p-7 transition-all duration-300 border-l-4 border-gold;
    box-shadow: 0 4px 20px -4px rgba(44, 74, 92, 0.08);
  }
  
  .testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px -8px rgba(44, 74, 92, 0.12);
  }
  
  /* Star Rating */
  .star-rating {
    @apply text-gold fill-current w-5 h-5;
  }
  
  /* =====================================================
     SECTION SPACING - Balanced whitespace
  ===================================================== */
  
  .section-luxury {
    @apply py-24 lg:py-32;
  }
  
  .section-padding {
    @apply py-20 lg:py-28;
  }
  
  .section-padding-sm {
    @apply py-16 lg:py-20;
  }
  
  .section-padding-lg {
    @apply py-28 lg:py-36;
  }
  
  /* Container */
  .container-default {
    @apply max-w-7xl mx-auto px-6 sm:px-8 lg:px-12;
  }
  
  .container-narrow {
    @apply max-w-5xl mx-auto px-6 sm:px-8 lg:px-12;
  }
  
  .container-wide {
    @apply max-w-8xl mx-auto px-6 sm:px-8 lg:px-12;
  }
  
  /* Section Heading */
  .section-heading {
    @apply text-center mb-14 lg:mb-16;
  }
  
  .section-heading-left {
    @apply mb-10 lg:mb-14;
  }
  
  /* =====================================================
     DIVIDERS - Subtle elegance
  ===================================================== */
  
  .divider-elegant {
    @apply w-20 h-px bg-gold/60 mx-auto;
  }
  
  .divider-elegant-sm {
    @apply w-12 h-px bg-gold/50 mx-auto;
  }
  
  .divider-gradient {
    @apply h-px bg-gradient-to-r from-transparent via-gold/30 to-transparent;
  }
  
  .divider-navy {
    @apply w-20 h-px bg-navy/40 mx-auto;
  }
  
  /* Decorative lines */
  .accent-line {
    @apply w-16 h-px bg-gold/70;
  }
  
  .accent-line-vertical {
    @apply w-px h-16 bg-gold/70;
  }
  
  /* =====================================================
     ICONS - Refined wrappers
  ===================================================== */
  
  .icon-wrapper {
    @apply w-12 h-12 rounded-full flex items-center justify-center bg-beige/50 transition-colors duration-300;
  }
  
  .icon-wrapper-gold {
    @apply w-12 h-12 rounded-full flex items-center justify-center bg-gold/10 transition-colors duration-300;
  }
  
  .icon-wrapper-navy {
    @apply w-12 h-12 rounded-full flex items-center justify-center bg-navy/10 transition-colors duration-300;
  }
  
  .icon-gold {
    @apply text-gold;
  }
  
  .icon-navy {
    @apply text-navy;
  }
}

/* =====================================================
   BACKGROUND PATTERNS - Very subtle (reduced opacity)
===================================================== */

.bg-pattern-luxury {
  position: relative;
}

.bg-pattern-luxury::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232c4a5c' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.bg-pattern-diagonal {
  position: relative;
}

.bg-pattern-diagonal::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.012;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232c4a5c' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* =====================================================
   GRADIENTS & OVERLAYS - Softer blends
===================================================== */

.hero-gradient {
  background: linear-gradient(145deg, #fffaf7 0%, #f8ede6 40%, #fffaf7 100%);
}

.overlay-navy {
  background: linear-gradient(180deg, rgba(44, 74, 92, 0.92) 0%, rgba(30, 54, 68, 0.95) 100%);
}

.overlay-gold {
  background: linear-gradient(135deg, rgba(213, 141, 114, 0.08) 0%, rgba(198, 122, 95, 0.04) 100%);
}

.bg-gradient-warm {
  background: linear-gradient(180deg, #fffaf7 0%, #f5e6df 50%, #fffaf7 100%);
}

.bg-gradient-soft {
  background: linear-gradient(180deg, #fffaf7 0%, #f8ede6 100%);
}

/* =====================================================
   MOBILE MENU
===================================================== */

.mobile-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-accordion.open .mobile-accordion-trigger {
  color: #D58D72;
}

.mobile-accordion.open .mobile-accordion-trigger svg {
  transform: rotate(180deg);
}

/* =====================================================
   FORM ELEMENTS
===================================================== */

:focus-visible {
  outline: 2px solid #D58D72;
  outline-offset: 2px;
}

::selection {
  background-color: rgba(213, 141, 114, 0.3);
  color: #2c4a5c;
}

input:focus, select:focus, textarea:focus {
  border-color: #D58D72 !important;
  box-shadow: 0 0 0 3px rgba(213, 141, 114, 0.12);
}

.input-luxury {
  @apply w-full px-4 py-3 rounded-lg border border-gray/60 bg-white text-charcoal transition-all duration-300;
}

.input-luxury:focus {
  @apply border-gold outline-none;
  box-shadow: 0 0 0 3px rgba(213, 141, 114, 0.12);
}

.input-luxury::placeholder {
  @apply text-charcoal-light;
}

/* =====================================================
   SCROLLBAR - Subtle
===================================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #fffaf7;
}

::-webkit-scrollbar-thumb {
  background: #d9997e;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #D58D72;
}

/* =====================================================
   ANIMATIONS - Smooth & subtle
===================================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

.stagger-reveal > * {
  opacity: 0;
  animation: fadeInUp 0.4s ease-out forwards;
}

.stagger-reveal > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-reveal > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-reveal > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-reveal > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-reveal > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-reveal > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-reveal > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-reveal > *:nth-child(8) { animation-delay: 0.4s; }

/* =====================================================
   UTILITY CLASSES
===================================================== */

/* Softer image overlays for treatment cards */
.overlay-treatment {
  background: linear-gradient(to top, rgba(44, 74, 92, 0.75) 0%, rgba(44, 74, 92, 0.2) 50%, transparent 100%);
}

/* Gold accent border */
.border-gold-accent {
  border-left: 3px solid #c8a882;
}

/* Smooth transitions */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Flexible Builder Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.animate-slide-up {
  animation: slideUp 0.8s ease-out;
}

.animate-slide-left {
  animation: slideLeft 0.8s ease-out;
}

.animate-slide-right {
  animation: slideRight 0.8s ease-out;
}