/* ===== CUSTOM PROPERTIES ===== */
:root {
  --terracotta: #C2704E;
  --terracotta-dark: #A85A3A;
  --terracotta-light: #D4916E;
  --sand: #E8D5C0;
  --sand-light: #F5EDE3;
  --sand-dark: #C4A882;
  --stone-50: #FAFAF8;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;
}

/* ===== TAILWIND EXTENSION ===== */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
  }

  h1, h2, h3, h4, .font-lora {
    font-family: 'Lora', serif;
  }

  .font-outfit {
    font-family: 'Outfit', sans-serif;
  }
}

@layer components {
  /* Navigation */
  .nav-link {
    @apply font-outfit text-stone-600 text-sm font-medium hover:text-terracotta transition-colors duration-200 relative;
  }

  .nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-terracotta rounded-full transition-all duration-200;
  }

  .nav-link:hover::after {
    @apply w-full;
  }

  /* Buttons */
  .btn-primary {
    @apply inline-flex items-center gap-2 px-6 py-3.5 rounded-full bg-terracotta text-white font-outfit text-sm font-semibold shadow-lg hover:bg-terracotta-dark hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200;
  }

  .btn-secondary {
    @apply inline-flex items-center gap-2 px-6 py-3.5 rounded-full bg-white/15 backdrop-blur-sm text-white font-outfit text-sm font-semibold border border-white/30 hover:bg-white/25 hover:shadow-lg transition-all duration-200;
  }

  /* Section Eyebrow */
  .section-eyebrow {
    letter-spacing: 0.12em;
  }

  /* Mobile nav */
  .mobile-nav-link {
    display: block;
  }

  /* Product cards */
  .product-card {
    @apply bg-white rounded-2xl p-4 shadow-sm hover:shadow-xl transition-shadow duration-300;
  }

  /* Hero */
  .hero {
    position: relative;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.pexels.com/photos/31484077/pexels-photo-31484077.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1920&h=1080');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(28, 25, 23, 0.55) 0%,
      rgba(28, 25, 23, 0.45) 40%,
      rgba(28, 25, 23, 0.70) 100%
    );
  }

  .hero-headline {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  }

  .hero-eyebrow {
    animation: fadeInDown 0.8s ease-out both;
  }

  .hero-headline {
    animation: fadeInUp 0.8s ease-out 0.15s both;
  }

  .hero-subtext {
    animation: fadeInUp 0.8s ease-out 0.3s both;
  }

  .hero-ctas {
    animation: fadeInUp 0.8s ease-out 0.45s both;
  }

  /* Scroll indicator */
  .hero-scroll-indicator {
    animation: fadeInUp 0.8s ease-out 0.8s both;
  }
}

@layer utilities {
  /* Reveal animations (progressive enhancement — JS adds .revealed) */
  .reveal-up {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .reveal-left {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .reveal-right {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  @media (prefers-reduced-motion: no-preference) {
    .reveal-up,
    .reveal-left,
    .reveal-right {
      opacity: 0;
      transform: translateY(24px);
    }

    .reveal-left {
      transform: translateX(-24px);
    }

    .reveal-right {
      transform: translateX(24px);
    }

    .reveal-up.revealed,
    .reveal-left.revealed,
    .reveal-right.revealed {
      opacity: 1;
      transform: translateY(0) translateX(0);
    }
  }
}

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--stone-100);
}

::-webkit-scrollbar-thumb {
  background: var(--sand-dark);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--terracotta-light);
}

/* ===== PRINT ===== */
@media print {
  #site-header,
  .hero-scroll-indicator {
    display: none;
  }

  body {
    color: #1C1917;
    background: white;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
  }

  .hero-bg,
  .hero-overlay {
    display: none;
  }

  .hero-headline,
  .hero-subtext,
  .hero-eyebrow {
    color: #1C1917 !important;
    text-shadow: none !important;
    animation: none !important;
  }
}