/* Luma base components */

.font-display-italic {
  font-family: var(--font-display), Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* Buttons */
.btn-luma-primary {
  @apply inline-flex items-center justify-center gap-2 px-6 py-3 font-semibold rounded-xl transition-all duration-200;
  background-color: var(--luma-brand);
  color: white;
}

.btn-luma-primary:hover {
  background-color: var(--luma-brand-hover);
}

.btn-luma-outline {
  @apply inline-flex items-center justify-center gap-2 px-6 py-3 font-semibold rounded-xl transition-all duration-200;
  background-color: transparent;
  color: var(--luma-brand);
  border: 2px solid var(--luma-brand);
}

.btn-luma-outline:hover {
  background-color: var(--luma-bg-subtle);
}

.btn-luma-warm {
  @apply inline-flex items-center justify-center gap-2 px-6 py-3 font-semibold rounded-xl transition-all duration-200;
  background-color: var(--luma-accent-warm);
  color: var(--luma-dark);
}

.btn-luma-secondary {
  @apply inline-flex items-center justify-center gap-2 w-full py-3 px-6 font-semibold rounded-xl transition-all duration-200;
  @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
}

/* Legacy aliases — migrate views to btn-luma-* */
.btn-primary {
  @apply inline-flex items-center justify-center gap-2 w-full px-6 py-3 font-semibold rounded-xl transition-all duration-200;
  background-color: var(--luma-brand);
  color: white;
}

.btn-primary:hover {
  background-color: var(--luma-brand-hover);
}

.btn-secondary {
  @apply inline-flex items-center justify-center gap-2 w-full py-3 px-6 font-semibold rounded-xl transition-all duration-200;
  @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
}

/* Cards */
.luma-card {
  @apply bg-white rounded-2xl p-6;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(26, 22, 37, 0.06);
}

.luma-card-accent {
  border-left: 3px solid var(--product-accent);
}

.card-spiritual, .card-glass, .dashboard-card {
  @apply bg-white rounded-2xl p-6;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(26, 22, 37, 0.06);
}

/* Forms */
.form-input, .luma-input {
  @apply w-full px-4 py-3 border-2 border-gray-200 rounded-xl transition-all duration-200;
  @apply focus:ring-4 focus:ring-purple-500/15 focus:border-[var(--luma-brand)] bg-white;
}

.form-label, .luma-label {
  @apply block text-sm font-medium text-[var(--luma-text-muted)] mb-2;
}

/* Typography */
.luma-page-title {
  @apply text-2xl md:text-3xl font-bold tracking-tight text-[var(--luma-text)];
}

.luma-page-subtitle {
  @apply text-base text-[var(--luma-text-muted)] mt-1;
}

.section-header {
  @apply text-3xl md:text-4xl font-bold text-[var(--luma-text)] mb-4;
}

.section-description {
  @apply text-lg text-[var(--luma-text-muted)] max-w-3xl;
}

/* Nav */
.nav-link {
  @apply text-[var(--luma-text-muted)] hover:text-[var(--product-accent)] px-3 py-2 rounded-md text-sm font-medium transition-colors;
}

.nav-link-active {
  color: var(--product-accent);
  @apply font-semibold border-b-2;
  border-color: var(--product-accent);
}

/* Flash */
.luma-flash-notice {
  @apply bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-xl mb-4;
}

.luma-flash-alert {
  @apply bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-xl mb-4;
}

/* Onboarding */
.onboarding-step {
  @apply bg-white rounded-2xl p-6 border-2 border-gray-100 hover:border-[var(--luma-brand)] transition-all;
  box-shadow: var(--shadow-card);
}

.onboarding-step-selected {
  border-color: var(--product-accent);
  @apply ring-2 ring-purple-100;
}

/* Feature blocks */
.feature-icon {
  @apply w-12 h-12 rounded-xl flex items-center justify-center text-white text-xl mb-4;
  background-color: var(--product-accent);
}

.feature-title {
  @apply text-lg font-semibold text-[var(--luma-text)] mb-2;
}

.feature-description {
  @apply text-[var(--luma-text-muted)];
}

/* Animations — minimal */
@keyframes luma-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-luma-fade-in {
  animation: luma-fade-in 0.5s ease-out forwards;
}