/**
 * Event Badge Component
 *
 * Status badges for event pages (registration status, event status, etc.)
 * Uses Design System variables from kuladu-variables.css
 *
 * TYPOGRAPHY: Alle Typo-Styles in kuladu-typography.css definiert
 * Nutze Utility-Classes für Font-Size (.text-sm, .text-base, etc.)
 *
 * Usage:
 * <span class="event-badge event-badge--success text-sm">Anmeldung möglich</span>
 * <span class="event-badge event-badge--warning text-base">Anmeldung geschlossen</span>
 */

/* ==========================================================================
   Base Badge Styles (Layout only - NO Typography!)
   ========================================================================== */

.event-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1-5) var(--space-3);
	border-radius: var(--radius-full);
	border: 2px solid var(--color-black);
	white-space: nowrap;
	font-size: var(--text-base);
}

/* ==========================================================================
   Badge Variants
   ========================================================================== */

/* Success - Green (Anmeldung möglich, aktive Veranstaltung) */
.event-badge--success {
	background: var(--color-primary-200);
	border-color: var(--color-primary-400);
	color: var(--color-black);
}

.event-badge--success {
	color: var(--color-primary-950);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	background-color: var(--color-primary-400);
	display: inline-block;
	white-space: nowrap;
	font-size: var(--text-size-100);
	line-height: var(--line-height-button);
}

/* Warning - Orange/Yellow (Anmeldung bald geschlossen, fast vorbei) */
.event-badge--warning {
	background: var(--color-secondary-400);
	color: var(--color-black);
}

/* Error - Red/Muted (Anmeldung geschlossen) */
.event-badge--error {
	background: var(--color-error-300);
	color: var(--color-black);
}

/* Neutral - Gray (Informational, event passed) */
.event-badge--neutral {
	background: var(--color-neutral-300);
	color: var(--color-black);
}

/* Info - Tertiary/Beige (zusätzliche Informationen) */
.event-badge--info {
	background: var(--color-tertiary-300);
	color: var(--color-black);
}

/* Dark - Black with Sand text (subtle, elegant) */
.event-badge--dark {
	background: var(--color-black);
	color: var(--color-sand-200);
	border-color: var(--color-black);
}

/* ==========================================================================
   Badge with Icon (optional)
   ========================================================================== */

.event-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Ensure sufficient color contrast (WCAG 2.2 AA) */
/* All badge variants use dark text on light backgrounds for 7:1+ contrast */

/* Screen reader only text for status context */
.event-badge__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}