/* ==========================================================================
   StatusBadge — Tickchak Design System
   מתואם 1:1 לפיגמה: Qw3YeURNIL8V1wdGubxIWQ / 9815:43881
   ----------------------------------------------------------------------
   API:
     base: .status-badge
     type:        --open · --mixed · --closed · --unredeemed · --soldOut · --active · --notActive
     appearance:  --filled · --outlineSoft · --outlineStrong · --onImage · --onImageColored
     scheme:      --dark (ב-RTL לרקע כהה)
     dot:         --with-dot
   ----------------------------------------------------------------------
   Tokens לפי type (light = ה-200/300/400 ; dark = ה-600/700):
     open       → pink/200      / pink/600
     mixed      → Oranges/200   / Oranges/600
     closed     → blue/200      / blue/600
     unredeemed → Reds/200      / Reds/600
     soldOut    → Grays/300     / Grays/700
     active     → green/400     / green/600
     notActive  → Grays/400     / Grays/600
   טקסטים (מהפיגמה):
     open=סדרה פתוחה · mixed=סדרה משולבת · closed=סדרה סגורה
     unredeemed=טרם מומש · soldOut=אזל · active=פעיל · notActive=לא פעיל
   ========================================================================== */

.status-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px var(--space-sm);                 /* 4/8 */
  border-radius:5px;
  /* ברירת מחדל = Live (DS default): Rubik SemiBold. App context דורס ל-Assistant. */
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);          /* 12 */
  font-weight:var(--font-weight-regular);      /* 400 */
  line-height:100%;
  background:transparent;
  white-space:nowrap;
  /* HUG: ללא height/width קבוע — מתכווץ לפי תוכן */
}

/* App context overrides */
.theme-app .status-badge,
.status-badge--app{
  font-family:var(--font-family-app);
}

/* ===== type → ערכי --sb-light / --sb-dark ===== */
.status-badge--open       { --sb-light:var(--color-pink-200);    --sb-dark:var(--color-pink-600); }
.status-badge--mixed      { --sb-light:var(--color-oranges-200); --sb-dark:var(--color-oranges-600); }
.status-badge--closed     { --sb-light:var(--color-blue-200);    --sb-dark:var(--color-blue-600); }
.status-badge--unredeemed { --sb-light:var(--color-reds-200);    --sb-dark:var(--color-reds-600); }
.status-badge--soldOut    { --sb-light:var(--color-grays-300);   --sb-dark:var(--color-grays-700); }
.status-badge--active     { --sb-light:var(--color-green-400);   --sb-dark:var(--color-green-600); }
.status-badge--notActive  { --sb-light:var(--color-grays-400);   --sb-dark:var(--color-grays-600); }
/* multiDate = "ריבוי מועדים" — טיפוס שמיני, נולד בפאנל "האירועים שלי"
   (gap.my_events.multi_date_tag · הכרעת אסף 28/07: "זה כן StatusBadge").
   blue/50 → blue/600. גוון בהיר יותר מ-closed ("סדרה סגורה") שתופס blue/200. */
.status-badge--multiDate   { --sb-light:var(--color-blue-50);    --sb-dark:var(--color-blue-600); }
/* upcoming / passed — מצב מועדה ברשימת-המועדות (אסף, 29/07: "צבעים יותר עדין בהירים").
   active/notActive היו כהים מדי לרשימה צפופה — green/400 ו-grays/400 כרקע מלא.
   אותו דפוס בדיוק כמו multiDate: מדרגת 50/100 לרקע · 600 לטקסט · appearance=soft. */
.status-badge--upcoming    { --sb-light:var(--color-green-50);   --sb-dark:var(--color-green-600); }
.status-badge--passed      { --sb-light:var(--color-grays-100);  --sb-dark:var(--color-grays-600); }

/* ===== appearance ===== */
/* filled (light) — bg=light, text=שחור */
.status-badge--filled{
  background:var(--sb-light);
  color:#000;
  border:none;
}
/* filled (dark) — bg=dark, text=לבן */
.status-badge--filled.status-badge--dark{
  background:var(--sb-dark);
  color:#fff;
}

/* outlineSoft — bg=transparent, border+text=light */
.status-badge--outlineSoft{
  background:transparent;
  border:1px solid var(--sb-light);
  color:var(--sb-light);
}

/* outlineStrong — bg=transparent, border+text=dark */
.status-badge--outlineStrong{
  background:transparent;
  border:1px solid var(--sb-dark);
  color:var(--sb-dark);
}

/* soft — רקע בגוון הבהיר + טקסט בגוון הכהה (בלי מסגרת).
   Appearance חמישי, נולד עם multiDate (אסף 28/07): filled נותן טקסט שחור,
   ו-outline נותן רקע שקוף — אף אחד מהם אינו המראה שאושר.
   ⚠️ נבדק ויזואלית ל-multiDate בלבד; לשאר הטיפוסים הניגודיות טרם נבדקה. */
.status-badge--soft{
  background:var(--sb-light);
  color:var(--sb-dark);
  border:none;
}

/* onImage — שחור@30% + מסגרת לבנה + טקסט לבן */
.status-badge--onImage{
  background:rgba(0,0,0,0.30);
  border:1px solid #fff;
  color:#fff;
}

/* onImageColored — light tone @50% + מסגרת לבנה + טקסט לבן */
.status-badge--onImageColored{
  background:color-mix(in srgb, var(--sb-light) 50%, transparent);
  border:1px solid #fff;
  color:#fff;
}
.status-badge--onImageColored.status-badge--dark{
  background:color-mix(in srgb, var(--sb-dark) 50%, transparent);
}

/* ===== Dot ===== */
.status-badge--with-dot::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}