

@layer base {
  html {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #151219;
    scroll-behavior: smooth;
    background-color: #FDFBF9;
  }
  
  /* Brand Typography: Lato Black (weight 900) for Headlines */
  h1, h2, h3, .font-black {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    letter-spacing: -0.015em;
  }

  body {
    background-color: #FDFBF9;
    color: #151219;
    overflow-x: hidden;
  }
}

/* Care & Comfort Subtle Soft Glows and Ambient Motion */
@keyframes gentleWarmth {
  0%, 100% {
    opacity: 0.65;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.03);
  }
}

@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes subtleWave {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}

@keyframes headingShimmer {
  0%, 100% {
    letter-spacing: -0.015em;
  }
  50% {
    letter-spacing: -0.010em;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 176, 221, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(201, 176, 221, 0);
  }
}

.animate-gentle-warmth {
  animation: gentleWarmth 8s ease-in-out infinite;
}

.animate-gentle-float {
  animation: gentleFloat 4s ease-in-out infinite;
}

.animate-subtle-wave {
  animation: subtleWave 6s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 3s infinite;
}

/* Card styling with subtle warm borders and realistic drop shadows */
.care-card {
  background: #FFFFFF;
  border: 1px solid #EEE7F4;
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px -2px rgba(66, 30, 61, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.care-card:hover {
  border-color: #C9B0DD;
  box-shadow: 0 12px 30px -4px rgba(66, 30, 61, 0.09);
  transform: translateY(-3px);
}

/* Soft frosted glass panel matching restraint */
.glass-panel {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #EEE7F4;
}

.glass-dropdown {
  background: #FFFFFF;
  border: 1px solid #EEE7F4;
  box-shadow: 0 12px 30px rgba(66, 30, 61, 0.12);
}
