/*
 * Warm & Personal Theme
 * A cozy, approachable design for staying connected with people you care about
 */

@layer base {
  body {
    @apply bg-cream-100 text-warmGray-900;
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply text-warmGray-900;
    letter-spacing: -0.02em;
  }
}

@layer components {
  /* Warm card style */
  .card-warm {
    @apply bg-white/90 backdrop-blur-sm rounded-2xl shadow-soft border border-warmGray-200/50;
  }

  /* Warm button styles */
  .btn-primary {
    @apply px-5 py-3 bg-primary-500 text-white rounded-xl hover:bg-primary-600 active:bg-primary-700 font-medium shadow-soft transition-all duration-200;
  }

  .btn-secondary {
    @apply px-5 py-3 bg-cream-300 text-warmGray-800 rounded-xl hover:bg-cream-400 font-medium transition-all duration-200;
  }

  /* Warm input styles */
  .input-warm {
    @apply w-full px-4 py-3 bg-white border-2 border-warmGray-200 rounded-xl focus:ring-2 focus:ring-primary-300 focus:border-primary-400 transition-all duration-200;
  }

  /* Warm link styles */
  .link-warm {
    @apply text-primary-600 hover:text-primary-700 underline decoration-primary-300 underline-offset-2 transition-colors;
  }
}

/* Soft animations */
@layer utilities {
  .transition-warm {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
}