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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(135deg, #fff5fb 0%, #ffe0f0 100%);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.african-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-weight: bold;
  border-radius: 12px;
}

.milestone-card {
  @apply border-l-4 pl-4 py-3;
}

.inspiration-card {
  @apply p-4 border rounded-lg;
}

.community-avatar {
  @apply w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-lg;
}

.stat-card {
  @apply bg-white rounded-lg p-4 border border-hotpink-light/30;
}

.btn-hotpink {
  @apply bg-hotpink hover:bg-hotpink-dark text-white font-bold py-2 px-4 rounded-lg transition;
}

.btn-hotpink-outlined {
  @apply border-2 border-hotpink text-hotpink hover:bg-hotpink/10 font-bold py-2 px-4 rounded-lg transition;
}

.card-hotpink {
  @apply bg-white rounded-lg border-2 border-hotpink-light/30 hover:shadow-lg transition;
}

.gradient-hotpink {
  @apply bg-gradient-to-r from-hotpink to-hotpink-dark;
}