/* Luma app shells */

.luma-app-shell {
  @apply min-h-screen bg-[var(--luma-bg-subtle)] text-[var(--luma-text)];
  font-family: var(--font-sans), system-ui, sans-serif;
}

.luma-nav-bar {
  @apply bg-white border-b border-gray-100 sticky top-0 z-40;
}

.luma-nav-inner {
  @apply max-w-6xl mx-auto px-4 sm:px-6 flex items-center justify-between h-14;
}

.luma-brand-mark {
  @apply font-bold text-lg tracking-tight text-[var(--luma-text)];
}

.luma-content-area {
  @apply max-w-6xl mx-auto px-4 sm:px-6 py-8;
}

.luma-onboarding-shell {
  @apply min-h-screen flex flex-col;
  background: linear-gradient(180deg, var(--luma-bg) 0%, var(--luma-bg-subtle) 100%);
}

.luma-onboarding-header {
  @apply text-center py-8;
}

.luma-onboarding-logo {
  @apply text-2xl font-bold text-[var(--luma-text)];
}

.luma-role-banner {
  @apply text-sm px-4 py-3 rounded-xl mb-6;
  background-color: var(--luma-bg-subtle);
  border: 1px solid rgba(155, 127, 212, 0.2);
  color: var(--luma-text-muted);
}

.luma-public-hero {
  @apply min-h-[70vh] flex flex-col justify-center relative overflow-hidden;
  background: var(--luma-bg);
  color: var(--luma-text);
}

.luma-public-hero-mesh {
  @apply absolute inset-0 pointer-events-none;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(155, 127, 212, 0.25), transparent),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(255, 107, 74, 0.08), transparent);
}

/* Legacy hero — softer than old purple gradient */
.hero-gradient {
  background: linear-gradient(180deg, var(--luma-bg) 0%, #d4c4f0 50%, var(--luma-bg-subtle) 100%);
}

.hero-overlay {
  @apply absolute inset-0 pointer-events-none;
  background: rgba(255, 255, 255, 0.1);
}

.btn-ghost-hero {
  @apply bg-white/10 backdrop-blur-md border border-white/20 text-white px-6 py-2 rounded-full hover:bg-white/20 transition-all duration-200;
}