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

@layer base {
  :root {
    --bone-white: #f6f1ec;
    --soft-cream: #efe7de;
    --mocha-taupe: #b8a89a;
    --deep-earth: #6f5e4f;
    --charcoal-brown: #3f362e;

    --ivory-cream: #fffef9;
    --sand-beige: #e8e4dd;
    --forest-green: #2e8b57;
    --clay-orange: #d2691e;
    --brick-red: #b22222;
    --slate-blue: #6a5acd;

    --forest-green-alpha: rgba(46, 139, 87, 0.1);
    --clay-orange-alpha: rgba(210, 105, 30, 0.1);
    --brick-red-alpha: rgba(178, 34, 34, 0.1);
    --slate-blue-alpha: rgba(106, 90, 205, 0.1);
    --charcoal-brown-alpha: rgba(63, 54, 46, 0.1);

    /* Aperture - Square UI */
    --ui-primary: #006aff;
    --ui-primary-hover: #005ed6;
    --ui-primary-light: #e6f0ff;

    --ui-bg: #f6f8fa;
    --ui-bg-card: #ffffff;
    --ui-bg-hover: #f3f4f6;

    --ui-border: #e1e4e8;
    --ui-border-light: #f3f4f6;

    --ui-text-primary: #24292e;
    --ui-text-secondary: #586069;
    --ui-text-tertiary: #8b949e;
    --ui-text-inverse: #ffffff;

    --ui-success: #28a745;
    --ui-success-light: #d4edda;

    --ui-warning: #dbab09;
    --ui-warning-light: #fff3cd;

    --ui-error: #d73a49;
    --ui-error-light: #f8d7da;

    --ui-info: #0366d6;
    --ui-info-light: #cce5ff;

    --ui-shadow-sm:
      0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.08);
    --ui-shadow-md:
      0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    --ui-shadow-lg:
      0 8px 24px rgba(0, 0, 0, 0, 16), 0 4px 6px rgba(0, 0, 0, 0.08);
    --ui-shadow-xl:
      0 20px 25px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.08);

    --ui-radius-sm: 4px;
    --ui-radius-md: 6px;
    --ui-radius-lg: 8px;
    --ui-radius-xl: 12px;
    --ui-radius-2xl: 16px;
    --ui-radius-full: 9999px;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* Font sizes */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem; /* 36px */
    --text-5xl: 3rem; /* 48px */
  }

  body {
    color: var(--charcoal-brown);
    background: var(--bone-white);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Playfair Display", serif;
  }
}

@layer components {
  .booking-header {
    @apply fixed top-0 left-0 right-0 z-50;
    background: var(--bone-white);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mocha-taupe);
  }

  .booking-nav {
    @apply max-w-7xl mx-auto px-8 py-4 flex items-center justify-between;
  }

  .booking-nav .logo a {
    @apply text-xl tracking-tight hover:opacity-80 transition-opacity;
    color: var(--charcoal-brown);
  }

  .booking-nav .nav-actions {
    @apply flex items-center gap-4;
  }

  .nav-primary {
    @apply max-w-7xl mx-auto px-8 py-6 flex items-center justify-between;
  }

  .logo a {
    @apply text-2xl tracking-tight hover:opacity-80 transition-opacity;
    color: var(--charcoal-brown);
  }

  .nav-links {
    @apply hidden md:flex items-center space-x-12;
  }

  .nav-links a {
    @apply hover:opacity-70 transition-opacity font-medium;
    color: var(--charcoal-brown);
  }

  .nav-actions {
    @apply flex items-center;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded-lg transition-all duration-300 relative overflow-hidden;
    background: linear-gradient(135deg, #3E352E, var(--deep-earth));
    color: var(--bone-white);
    border-color: #3E352E;
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    transition: left 0.5s ease;
  }

  .btn-primary:hover::before {
    left: 100%;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.3);
    background: linear-gradient(135deg, var(--deep-earth), #3E352E);
  }

  .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(139, 69, 19, 0.2);
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded-lg transition-all duration-300 relative overflow-hidden;
    background: linear-gradient(135deg, var(--bone-white), var(--soft-cream));
    color: var(--charcoal-brown);
    border-color: var(--mocha-taupe);
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.1);
  }

  .btn-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(139, 69, 19, 0.1),
      transparent
    );
    transition: left 0.5s ease;
  }

  .btn-secondary:hover::before {
    left: 100%;
  }

  .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.2);
    background: linear-gradient(135deg, var(--soft-cream), var(--bone-white));
    border-color: #3E352E;
  }

  .btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(139, 69, 19, 0.1);
  }

  .hero {
    @apply min-h-screen flex items-center justify-center pt-24 relative overflow-hidden;
    background: var(--bone-white);
  }

  .hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(
        circle at 20% 80%,
        rgba(139, 69, 19, 0.03) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 20%,
        rgba(218, 165, 32, 0.02) 0%,
        transparent 50%
      );
    animation: heroGlow 8s ease-in-out infinite alternate;
  }

  .hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      radial-gradient(
        circle at 30% 40%,
        rgba(139, 69, 19, 0.04) 1px,
        transparent 1px
      ),
      radial-gradient(
        circle at 70% 60%,
        rgba(218, 165, 32, 0.03) 1px,
        transparent 1px
      ),
      radial-gradient(
        circle at 50% 80%,
        rgba(139, 69, 19, 0.02) 1px,
        transparent 1px
      );
    background-size:
      100px 100px,
      150px 150px,
      200px 200px;
    background-position:
      0 0,
      50px 50px,
      100px 100px;
    opacity: 0.3;
    pointer-events: none;
  }

  @keyframes heroGlow {
    0% {
      opacity: 0.3;
    }
    100% {
      opacity: 0.6;
    }
  }

  .hero-content {
    @apply max-w-7xl mx-auto px-8 text-center relative z-10;
  }

  .logo-mark {
    @apply w-24 h-24 mx-auto mb-12;
    color: var(--charcoal-brown);
  }

  .hero h1 {
    @apply text-7xl md:text-9xl mb-4 tracking-tight;
    color: var(--charcoal-brown);
    animation: heroFadeIn 1s ease-out 0.5s both;
    opacity: 0;
  }

  .hero h2 {
    @apply text-2xl md:text-3xl mb-6;
    color: var(--charcoal-brown);
    opacity: 0;
    animation: heroFadeIn 1s ease-out 1s both;
  }

  .hero p {
    @apply text-xl mb-12 max-w-2xl mx-auto leading-relaxed;
    color: var(--charcoal-brown);
    opacity: 0;
    animation: heroFadeIn 1s ease-out 1.5s both;
  }

  .hero-actions {
    @apply flex items-center justify-center gap-6 flex-wrap;
    animation: heroFadeIn 1s ease-out 2s both;
    opacity: 0;
  }

  @keyframes heroFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .hero-image {
    @apply mt-16 rounded-2xl overflow-hidden;
    background: var(--soft-cream);
  }

  .foundation {
    @apply max-w-7xl mx-auto px-8 py-32 grid md:grid-cols-2 gap-16 items-center;
  }

  .foundation article {
    @apply space-y-8;
  }

  .foundation h3 {
    @apply text-sm font-semibold tracking-widest uppercase mb-4;
    color: var(--mocha-taupe);
  }

  .foundation h4 {
    @apply text-4xl md:text-5xl mb-6;
    color: var(--charcoal-brown);
  }

  .foundation p {
    @apply text-xl leading-relaxed;
    color: var(--charcoal-brown);
    opacity: 0.85;
  }

  .foundation-image {
    @apply rounded-2xl overflow-hidden h-96;
    background: var(--soft-cream);
  }

  .services-preview {
    @apply max-w-7xl mx-auto px-8 py-32;
  }

  .services-preview h3 {
    @apply text-4xl md:text-5xl mb-16 text-center;
    color: var(--charcoal-brown);
  }

  .service-cards {
    @apply grid md:grid-cols-3 gap-12 mb-16;
  }

  .service-card {
    @apply p-10 rounded-2xl transition-shadow;
    background: var(--soft-cream);
  }

  .service-card h4 {
    @apply text-2xl mb-6;
    color: var(--charcoal-brown);
  }

  .service-card p {
    color: var(--charcoal-brown);
    opacity: 0.8;
  }

  .testimonials {
    @apply max-w-7xl mx-auto px-8 py-32 rounded-3xl mb-12;
    background: var(--soft-cream);
  }

  .testimonials h3 {
    @apply text-4xl md:text-5xl mb-16 text-center;
    color: var(--charcoal-brown);
  }

  .testimonial-grid {
    @apply grid md:grid-cols-2 gap-12 mb-16;
  }

  .testimonial {
    @apply p-10 rounded-2xl;
    background: var(--bone-white);
  }

  .testimonial .stars {
    @apply text-2xl mb-6;
    color: var(--mocha-taupe);
  }

  .testimonial p {
    @apply text-xl mb-6 italic leading-relaxed;
    color: var(--charcoal-brown);
    opacity: 0.85;
  }

  .testimonial cite {
    @apply font-semibold not-italic block;
    color: var(--charcoal-brown);
  }

  .site-footer {
    @apply py-16;
    background: var(--charcoal-brown);
  }

  .site-footer a {
    @apply hover:opacity-70 transition-opacity;
    color: var(--mocha-taupe);
  }

  .footer-brand {
    @apply max-w-7xl mx-auto px-8 mb-12;
  }

  .footer-brand span {
    @apply text-2xl block mb-3;
    color: var(--bone-white);
  }

  .footer-brand p {
    color: var(--mocha-taupe);
  }

  .footer-links {
    @apply max-w-7xl mx-auto px-8 mb-12 flex flex-wrap gap-8;
  }

  .footer-legal {
    @apply max-w-7xl mx-auto px-8 mb-12 flex flex-wrap gap-8;
  }

  .footer-contact {
    @apply max-w-7xl mx-auto px-8 flex flex-wrap gap-8;
    color: var(--mocha-taupe);
  }

  .section {
    @apply py-32;
  }

  .section-header {
    @apply max-w-7xl mx-auto px-8 mb-16;
  }

  .section-title {
    @apply text-4xl md:text-5xl mb-6;
    color: var(--charcoal-brown);
  }

  .section-subtitle {
    @apply text-xl max-w-2xl leading-relaxed;
    color: var(--charcoal-brown);
    opacity: 0.8;
  }

  .select-content {
    background: var(--bone-white);
    border: 1px solid var(--mocha-taupe);
  }

  .select-item {
    color: var(--charcoal-brown);
    transition: background 0.15s;
  }

  .select-item:hover,
  .select-item[data-highlighted] {
    background: var(--soft-cream);
  }

  .select-item[data-state="checked"] {
    background: var(--soft-cream);
  }

  /* ========================================
   ELEGANT NAVIGATION STYLES
   ======================================== */

  .site-header {
    @apply fixed top-0 left-0 right-0 z-50 backdrop-blur-md border-b border-amber-100/50 transition-all duration-300;
    background: rgba(255, 255, 255, 0.98);
    background-image:
      radial-gradient(
        circle at 25% 25%,
        rgba(139, 69, 19, 0.02) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 75% 75%,
        rgba(218, 165, 32, 0.01) 0%,
        transparent 50%
      );
  }

  .site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      linear-gradient(
        45deg,
        transparent 49%,
        rgba(139, 69, 19, 0.03) 50%,
        transparent 51%
      ),
      linear-gradient(
        -45deg,
        transparent 49%,
        rgba(218, 165, 32, 0.02) 50%,
        transparent 51%
      );
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
  }

  .site-header.scrolled {
    @apply shadow-lg;
    background: rgba(255, 255, 255, 0.95);
  }

  .nav-primary {
    @apply max-w-7xl mx-auto px-8 py-6 flex items-center justify-between relative;
  }

  .logo a {
    @apply text-2xl font-bold relative transition-all duration-300;
    color: var(--charcoal-brown);
    text-shadow: 0 1px 2px rgba(139, 69, 19, 0.1);
  }

  .logo a::before {
    content: "";
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    background: linear-gradient(
      45deg,
      rgba(139, 69, 19, 0.05),
      rgba(218, 165, 32, 0.03)
    );
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .logo a:hover::before {
    opacity: 1;
  }

  .nav-links {
    @apply hidden md:flex items-center space-x-8;
  }

  .nav-links a {
    @apply text-sm font-medium transition-all duration-300 relative;
    color: var(--charcoal-brown);
    position: relative;
  }

  .nav-links a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(
      90deg,
      #3E352E,
      var(--golden-brown)
    );
    transition: width 0.3s ease;
    border-radius: 1px;
  }

  .nav-links a:hover::after {
    width: 100%;
  }

  .nav-links a:hover {
    color: #3E352E;
    transform: translateY(-1px);
  }

  .nav-actions {
    @apply flex items-center gap-4;
  }

  .nav-actions .btn-primary,
  .nav-actions .btn-secondary {
    @apply transition-all duration-300;
    position: relative;
    overflow: hidden;
  }

  .nav-actions .btn-primary::before,
  .nav-actions .btn-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    transition: left 0.5s ease;
  }

  .nav-actions .btn-primary:hover::before,
  .nav-actions .btn-secondary:hover::before {
    left: 100%;
  }

  .nav-actions .btn-primary:hover,
  .nav-actions .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.15);
  }

  .select-trigger {
    background: var(--bone-white);
    border: 1px solid var(--mocha-taupe);
    color: var(--charcoal-brown);
  }

  .select-trigger:hover {
    border-color: var(--deep-earth);
  }

  .select-trigger[data-state="open"] {
    border-color: var(--deep-earth);
  }

  .icon-btn {
    @apply p-2 rounded-lg transition-all duration-300 border border-transparent;
    color: var(--charcoal-brown);
    background: transparent;
  }

  .icon-btn:hover {
    background: var(--soft-cream);
    border-color: var(--mocha-taupe);
    transform: translateY(-1px);
  }

  .icon-btn:active {
    transform: translateY(0);
  }
}