/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  /* Warm Mexican Palette from client/src/index.css */
  --background: 36 33% 97%; /* Off-white warm background */
  --foreground: 20 14% 4%;  /* Dark charcoal for text */

  --primary: 18 90% 55%;    /* Vibrant Terracotta/Orange */
  --primary-foreground: 0 0% 100%;

  --secondary: 45 93% 57%;  /* Warm Maize Yellow */
  --secondary-foreground: 20 14% 4%;

  --muted: 30 20% 90%;
  --muted-foreground: 25 10% 45%;

  --accent: 340 82% 52%;    /* Deep Pink/Red accent */
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;

  --border: 30 20% 85%;
  --input: 30 20% 85%;
  --ring: 18 90% 55%;

  --radius: 1rem;

  --font-display: 'Architects Daughter', cursive;
  --font-body: 'DM Sans', sans-serif;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  /* antialiased selection:bg-primary/20 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body ::selection {
  background-color: hsl(var(--primary) / 0.2);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Utilities */
.text-shadow {
  text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

.pattern-bg {
  background-color: hsl(var(--background));
  background-image: radial-gradient(hsl(var(--primary)/0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Scroll Animation Utilities */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, visibility;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
}