@import "tailwindcss";

@theme {
  --color-primary: var(--pwb-primary-color);
  --color-secondary: var(--pwb-secondary-color);
  --color-accent: var(--pwb-accent-color);
}

/* Biarritz Theme - Coastal French Basque Aesthetic */
/* High-contrast, accessible design with ocean blues and warm sand tones */

/* Google Fonts - Self-hosted for performance */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/playfairdisplay/v30/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvUDQZNLo_U2r.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4gaVI.woff2') format('woff2');
}

@layer base {
  :root {
    /* WCAG AA Compliant Color System */
    /* All color combinations tested for 4.5:1 contrast minimum */
    
    /* Ocean Blues - Primary Brand */
    --ocean-darkest: #082F49;   /* Footer, dark sections */
    --ocean-dark: #0C4A6E;       /* Text on light, primary buttons */
    --ocean-primary: #0369A1;    /* Backgrounds */
    --ocean-light: #075985;      /* Hover states */
    --ocean-lightest: #E0F2FE;   /* Subtle backgrounds */
    
    /* Warm Sand - Secondary Brand */
    --sand-dark: #92400E;        /* Text on light backgrounds */
    --sand-primary: #B45309;     /* Accents, borders */
    --sand-medium: #D97706;      /* Highlights */
    --sand-light: #F59E0B;       /* Soft accents */
    --sand-lightest: #FEF3C7;    /* Background sections */
    
    /* Neutral Grays - Warm tone */
    --neutral-900: #1C1917;      /* Primary text (19.56:1 on white) */
    --neutral-800: #292524;      /* Secondary text */
    --neutral-700: #44403C;      /* Muted text */
    --neutral-600: #57534E;      /* Placeholder text */
    --neutral-200: #E7E5E4;      /* Borders */
    --neutral-100: #F5F5F4;      /* Subtle backgrounds */
    --neutral-50: #FAFAF9;       /* Page background */
    
    /* Semantic Colors */
    --success: #15803D;          /* Success messages */
    --error: #B91C1C;            /* Error messages */
    --warning: #CA8A04;          /* Warning messages */
  }
  
  body {
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
    color: var(--neutral-900);
    background-color: var(--neutral-50);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    color: var(--neutral-900);
  }
}

@layer components {
  /* High Contrast Buttons */
  .btn-ocean-primary {
    @apply bg-[#0369A1] hover:bg-[#0C4A6E] text-white font-semibold py-3 px-6 rounded-lg transition-all shadow-md hover:shadow-lg hover:-translate-y-0.5;
  }
  
  .btn-sand-primary {
    @apply bg-[#D97706] hover:bg-[#B45309] text-white font-semibold py-3 px-6 rounded-lg transition-all shadow-md hover:shadow-lg hover:-translate-y-0.5;
  }
  
  .btn-ocean-outline {
    @apply border-2 border-[#0C4A6E] text-[#0C4A6E] hover:bg-[#0C4A6E] hover:text-white font-semibold py-3 px-6 rounded-lg transition-all;
  }
  
  /* Coastal Property Cards */
  .card-coastal {
    @apply bg-white rounded-xl shadow-md overflow-hidden border-t-4 border-[#D97706] hover:shadow-xl transition-all hover:-translate-y-1;
  }
  
  .card-coastal-header {
    @apply relative overflow-hidden;
  }
  
  .card-coastal-body {
    @apply p-6;
  }
  
  .card-coastal-title {
    @apply text-xl font-semibold text-[#1C1917] mb-2 hover:text-[#0C4A6E] transition-colors;
  }
  
  .card-coastal-price {
    @apply text-2xl font-bold text-[#0C4A6E] mb-4;
  }
  
  /* Section Headers - High Contrast */
  .section-header-coastal {
    @apply text-center mb-12;
  }
  
  .section-subtitle {
    @apply text-sm uppercase tracking-widest text-[#D97706] mb-2 font-semibold;
  }
  
  .section-title {
    @apply text-3xl md:text-4xl font-bold text-[#1C1917] mb-4;
    font-family: 'Playfair Display', serif;
  }
  
  .section-description {
    @apply text-lg text-[#44403C] max-w-2xl mx-auto;
  }
  
  /* Navigation Links - Accessible */
  .nav-link-coastal {
    @apply px-4 py-2 text-[#1C1917] hover:text-[#0C4A6E] hover:bg-[#F5F5F4] rounded-lg transition-all font-medium;
  }
  
  .nav-link-active {
    @apply text-[#0C4A6E] bg-[#E0F2FE] font-semibold;
  }
  
  /* Property Features */
  .feature-icon-coastal {
    @apply w-12 h-12 bg-[#E0F2FE] text-[#0C4A6E] rounded-full flex items-center justify-center text-xl;
  }
  
  .feature-card-coastal {
    @apply bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all text-center;
  }
  
  /* Badges */
  .badge-ocean {
    @apply bg-[#0369A1] text-white px-3 py-1 rounded-full text-sm font-semibold;
  }
  
  .badge-sand {
    @apply bg-[#D97706] text-white px-3 py-1 rounded-full text-sm font-semibold;
  }
  
  /* Wave Divider Component */
  .wave-section-divider {
    @apply relative;
  }
  
  .wave-svg {
    @apply w-full h-16 md:h-20;
  }
}

@layer utilities {
  /* Background Gradients - Coastal */
  .bg-ocean-gradient {
    background: linear-gradient(135deg, #0C4A6E 0%, #0369A1 100%);
  }
  
  .bg-ocean-gradient-dark {
    background: linear-gradient(135deg, #082F49 0%, #0C4A6E 100%);
  }
  
  .bg-sand-gradient {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
  }
  
  .bg-coastal-sunset {
    background: linear-gradient(135deg, #0369A1 0%, #D97706 50%, #F59E0B 100%);
  }
  
  /* High Contrast Text */
  .text-ocean-dark {
    color: #0C4A6E;
  }
  
  .text-sand-dark {
    color: #B45309;
  }
  
  .text-on-ocean {
    color: #FFFFFF;
  }
  
  /* Accessibility Focus Rings */
  .focus-ocean {
    @apply focus:outline-none focus:ring-2 focus:ring-[#0369A1] focus:ring-offset-2;
  }
  
  /* Hover Effects */
  .hover-lift {
    @apply transition-all hover:-translate-y-1 hover:shadow-lg;
  }
  
  .hover-ocean {
    @apply transition-colors hover:text-[#0C4A6E];
  }
}
