/* ==========================================================================
   Badge Components - BEM Naming
   ========================================================================== */

/* ========================================================================
   Base Badge - FastRetro Neo-Brutalist Style
   ======================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-shadow-light);
  background-color: var(--color-surface-solid);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-light);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.badge:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-light);
}

/* Dark mode badges - VISIBLE colored shadows */
.dark .badge,
html.dark .badge {
  background-color: oklch(25% 0.02 260);
  border-color: var(--color-border-dark-default);
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-dark-default);
}

.dark .badge:hover,
html.dark .badge:hover {
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-default);
}

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

/* Pink - FastRetro pastel style */
.badge--pink {
  background: var(--color-pastel-pink);
  color: var(--color-shadow-light);
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-xs) oklch(55% 0.15 350);
}

.dark .badge--pink,
html.dark .badge--pink {
  background: oklch(55% 0.16 350);
  color: oklch(95% 0.02 350);
  border-color: var(--color-border-dark-pink);
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-dark-pink);
}

/* Sky - FastRetro pastel style */
.badge--sky {
  background: var(--color-pastel-blue);
  color: var(--color-shadow-light);
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-xs) oklch(45% 0.12 230);
}

.dark .badge--sky,
html.dark .badge--sky {
  background: oklch(50% 0.12 230);
  color: oklch(95% 0.02 230);
  border-color: var(--color-border-dark-sky);
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-dark-sky);
}

/* Amber - FastRetro pastel style */
.badge--amber {
  background: var(--color-pastel-yellow);
  color: var(--color-shadow-light);
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-xs) oklch(55% 0.14 85);
}

.dark .badge--amber,
html.dark .badge--amber {
  background: oklch(60% 0.14 85);
  color: oklch(15% 0.02 85);
  border-color: var(--color-border-dark-amber);
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-dark-amber);
}

/* Purple - FastRetro pastel style */
.badge--purple {
  background: var(--color-pastel-lavender);
  color: var(--color-shadow-light);
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-xs) oklch(45% 0.14 285);
}

.dark .badge--purple,
html.dark .badge--purple {
  background: oklch(50% 0.14 285);
  color: oklch(95% 0.02 285);
  border-color: var(--color-border-dark-violet);
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-dark-violet);
}

/* Green/Success - FastRetro pastel style */
.badge--green,
.badge--success {
  background: var(--color-pastel-mint);
  color: var(--color-shadow-light);
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-xs) oklch(45% 0.12 145);
}

.dark .badge--green,
.dark .badge--success,
html.dark .badge--green,
html.dark .badge--success {
  background: oklch(50% 0.12 145);
  color: oklch(95% 0.02 145);
  border-color: oklch(65% 0.15 145);
  box-shadow: var(--shadow-retro-xs) oklch(50% 0.15 145);
}

/* Red/Error - FastRetro pastel style */
.badge--red,
.badge--error {
  background: oklch(88% 0.1 25);
  color: var(--color-shadow-light);
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-xs) oklch(50% 0.16 25);
}

.dark .badge--red,
.dark .badge--error,
html.dark .badge--red,
html.dark .badge--error {
  background: oklch(50% 0.16 25);
  color: oklch(95% 0.02 25);
  border-color: oklch(70% 0.2 25);
  box-shadow: var(--shadow-retro-xs) oklch(55% 0.2 25);
}

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

/* Ghost/Outline - FastRetro style */
.badge--ghost {
  background: oklch(98% 0.01 0);
  border-color: var(--color-shadow-light);
  color: var(--color-ink-muted);
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-light);
}

.badge--ghost:hover {
  background-color: var(--color-pastel-cream);
}

.dark .badge--ghost,
html.dark .badge--ghost {
  background: oklch(22% 0.02 260);
  border-color: var(--color-border-dark-default);
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-dark-default);
}

/* Muted (subtle) */
.badge--muted {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-200);
  color: var(--color-gray-600);
}

.dark .badge--muted,
html.dark .badge--muted {
  background-color: var(--color-slate-800);
  border-color: var(--color-slate-700);
  color: var(--color-gray-400);
}

/* ========================================================================
   Badge Sizes
   ======================================================================== */

/* Small */
.badge--sm {
  padding: 0.125rem 0.5rem;
  font-size: 0.65rem;
  gap: 2px;
}

/* Large */
.badge--lg {
  padding: 0.375rem 1rem;
  font-size: var(--text-sm);
}

/* ========================================================================
   Badge with Icon
   ======================================================================== */
.badge__icon {
  font-size: 0.875em;
  line-height: 1;
}

.badge--sm .badge__icon {
  font-size: 0.75em;
}

/* ========================================================================
   Badge with Dot (status indicator)
   ======================================================================== */
.badge--dot::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: currentColor;
}

.badge--sm.badge--dot::before {
  width: 0.375rem;
  height: 0.375rem;
}

/* ========================================================================
   Badge Count (notification style)
   ======================================================================== */
.badge--count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: var(--font-bold);
}

.badge--count.badge--sm {
  min-width: 1rem;
  height: 1rem;
  font-size: 0.5rem;
}

/* ========================================================================
   Clickable Badge
   ======================================================================== */
button.badge,
a.badge {
  cursor: pointer;
  text-decoration: none;
}

button.badge:focus-visible,
a.badge:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ========================================================================
   Badge Group
   ======================================================================== */
.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.badge-group--sm {
  gap: 4px;
}

/* ========================================================================
   Legacy Aliases (Tailwind-style class names)
   For backward compatibility with existing views
   ======================================================================== */

/* badge-modern = badge (FastRetro style) */
.badge-modern {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-shadow-light);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: 1;
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-light);
}

/* badge-pink (FastRetro style) */
.badge-pink {
  background: var(--color-pastel-pink);
  color: var(--color-shadow-light);
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-xs) oklch(55% 0.15 350);
}

.dark .badge-pink,
html.dark .badge-pink {
  background: oklch(55% 0.16 350);
  color: oklch(95% 0.02 350);
  border-color: var(--color-shadow-dark);
}

/* badge-sky (FastRetro style) */
.badge-sky {
  background: var(--color-pastel-blue);
  color: var(--color-shadow-light);
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-xs) oklch(45% 0.12 230);
}

.dark .badge-sky,
html.dark .badge-sky {
  background: oklch(50% 0.12 230);
  color: oklch(95% 0.02 230);
  border-color: var(--color-shadow-dark);
}

/* badge-amber (FastRetro style) */
.badge-amber {
  background: var(--color-pastel-yellow);
  color: var(--color-shadow-light);
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-xs) oklch(55% 0.14 85);
}

.dark .badge-amber,
html.dark .badge-amber {
  background: oklch(60% 0.14 85);
  color: oklch(15% 0.02 85);
  border-color: var(--color-shadow-dark);
}