/* Global Typography Styles */

/* Base font settings */
body {
  font-family: "Roboto", sans-serif;
  color: #4a4a3a;
  font-size: 16px;
  line-height: 1.6;
  background-color: #f5f2e9;
}

/* Page Titles (h1 in hero sections) */
.page-title {
  @apply text-4xl md:text-5xl font-bold mb-6 text-olive-800;
}

/* Subtitle text in hero sections */
.page-subtitle {
  @apply text-lg md:text-xl max-w-3xl mx-auto mb-8 text-olive-700;
}

/* Section Titles (h2) */
.section-title {
  @apply text-2xl md:text-3xl font-bold mb-8 text-center text-olive-800;
}

/* Card or component titles (h3) */
.card-title {
  @apply text-xl font-bold mb-4 text-olive-800;
}

/* Body text */
.body-text {
  @apply text-base text-olive-700;
}

/* Small text */
.small-text {
  @apply text-sm text-olive-600;
}

/* Gradient backgrounds with paw pattern */
.gradient-bg {
  @apply bg-gradient-to-r from-beige-100 to-beige-200 relative overflow-hidden;
}

.gradient-bg-alt {
  @apply bg-gradient-to-r from-olive-100 to-olive-200 relative overflow-hidden;
}

.gradient-bg::before,
.gradient-bg-alt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/images/paw-pattern.svg");
  background-size: 200px;
  opacity: 0.05;
  z-index: 0;
}

.gradient-bg > *,
.gradient-bg-alt > * {
  position: relative;
  z-index: 1;
}

/* Brand Colors */
:root {
  --primary-color: #5a6b46;
  --primary-hover: #4a5a3a;
  --secondary-color: #f5f2e9;
  --secondary-hover: #e8e3d5;
  --background-color: #f5f2e9;
  --text-color: #4a4a3a;
  --footer-color: #3d4a30;
}

.text-color {
  color: var(--primary-color);
}

.text-color-light {
  color: var(--secondary-color);
}

.bg-color {
  background-color: var(--primary-color);
}

.bg-color-light {
  background-color: var(--secondary-color);
}

.shadow-card {
  box-shadow: 6px 6px 0px rgba(90, 107, 70, 0.6);
}

.shadow-button {
  box-shadow: 4px 4px 0px rgba(74, 74, 58, 0.7);
}

/* Paw Pattern Background */
.paw-pattern-bg {
  position: relative;
  overflow: hidden;
}

.paw-pattern-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/images/paw-pattern.svg");
  background-size: 200px;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.paw-pattern-bg > * {
  position: relative;
  z-index: 1;
}

.pattern-paw {
  background-image: url("/images/paw-pattern.svg");
  background-size: 200px;
}

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}