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

@layer base {
  :root {
    --color-oat: #f3f0eb;
    --color-milk-white: #fdfdfd;
    --color-ash-gray: #e8e6e3;
    --color-sage-green: #d9dfd5;
    --color-text-dark: #333333;
    --color-text-light: #7a7a7a;
  }

  body {
    @apply bg-[var(--color-oat)] text-[var(--color-text-dark)] font-sans;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-light tracking-wide;
  }

  a {
    @apply text-inherit no-underline;
  }

  img {
    @apply object-cover;
  }
}

@layer components {
  .nav-link {
    @apply px-4 py-2 font-light tracking-wider hover:text-[var(--color-sage-green)] transition-colors duration-300;
  }

  .hero-title {
    @apply text-4xl md:text-5xl lg:text-6xl max-w-3xl leading-tight;
  }

  .section-title {
    @apply text-2xl md:text-3xl font-light mb-6;
  }

  .card-hover {
    @apply transition-transform duration-500 ease-in-out hover:scale-105 cursor-pointer;
  }

  .split-left {
    @apply w-full md:w-1/2 p-8 md:p-12 bg-[var(--color-milk-white)] sticky top-0 h-screen overflow-y-auto;
  }

  .split-right {
    @apply w-full md:w-1/2 h-screen overflow-hidden;
  }

  .footer {
    @apply text-center py-6 text-[var(--color-text-light)] text-sm;
  }
}

@layer utilities {
  .aspect-video-container {
    @apply relative w-full h-0 pb-[56.25%];
  }

  .aspect-video-content {
    @apply absolute top-0 left-0 w-full h-full;
  }
}