/**
 * Einundzwanzig Custom Components
 *
 * Projekt-spezifische UI-Komponenten wie Feature-Cards,
 * Info-Boxen, Navigation und Status-Badges.
 */

@layer components {
    /**
     * Feature Cards
     *
     * Karten für die Darstellung von Features/Benefits.
     * Varianten: Standard, Nostr (grün), Lightning (lila)
     */
    .feature-card {
        @apply bg-bg-surface rounded-xl p-5 border border-border-subtle;
    }

    .feature-card-nostr {
        @apply bg-bg-surface rounded-xl p-5 border border-green-nostr;
    }

    .feature-card-lightning {
        @apply bg-bg-surface rounded-xl p-5 border border-purple-accent;
    }

    /**
     * Info Boxes
     *
     * Hervorgehobene Informationsbereiche mit Gradient-Hintergrund.
     * Varianten: Warning (amber), Success (grün)
     */
    .info-box {
        @apply rounded-xl p-4 border;
    }

    .info-box-warning {
        @apply rounded-xl p-4 border border-amber-500 bg-gradient-to-b from-amber-500/20 to-transparent;
    }

    .info-box-success {
        @apply rounded-xl p-4 border border-green-nostr bg-gradient-to-b from-green-nostr/20 to-transparent;
    }

    /**
     * Navigation Items
     *
     * Header-Navigation mit Active-State.
     */
    .nav-item {
        @apply px-4 py-3 text-text-secondary hover:text-text-primary transition-colors;
    }

    .nav-item-active {
        @apply px-4 py-3 text-text-primary hover:text-text-primary transition-colors border-b-2 border-orange-primary;
    }

    /**
     * Status Badges
     *
     * Inline-Status-Anzeigen für verschiedene Zustände.
     * Varianten: Active (grün), Pending (amber)
     */
    .status-badge {
        @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm;
    }

    .status-badge-active {
        @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm bg-green-success/20 text-green-success;
    }

    .status-badge-pending {
        @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm bg-amber-500/20 text-amber-500;
    }

    /**
     * Brand Icon Container
     *
     * Container für das Einundzwanzig-Logo/Icon.
     */
    .brand-icon {
        @apply w-8 h-8 rounded-lg bg-orange-primary flex items-center justify-center;
    }
}