/* ============================================================
   FCH MATCHDAY CORE ICON SET 2.0 · FINAL · 10 Event-Icons
   assets/css/fch-matchday-icons.css
   Eigenständig – überschreibt keine bestehende Anwendung.
   ============================================================ */

:root {
  --fch-green: #005333;
  --fch-light-green: #82c17a;
  --event-yellow: #FFD51E;
  --event-red: #E51B23;
  --event-green: #159447;

  /* Standardfarbe einfarbiger Icons (currentColor-Kette) */
  --fch-md-icon-color: #1c1c1c;
}

.fch-md-dark,
[data-theme="dark"] {
  --fch-md-icon-color: #f2f2f2;
}

/* ---------- Basisklasse ---------- */
.fch-md-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: none;
  vertical-align: middle;
  color: var(--fch-md-icon-color);
  fill: currentColor;
}

/* ---------- Größenklassen ---------- */
.fch-md-icon--16 { width: 16px; height: 16px; }
.fch-md-icon--24 { width: 24px; height: 24px; }
.fch-md-icon--32 { width: 32px; height: 32px; }
.fch-md-icon--48 { width: 48px; height: 48px; }

/* ---------- Kontextklassen ---------- */
.fch-md-icon--timeline { width: 20px; height: 20px; }
.fch-md-icon--mobile   { width: 28px; height: 28px; }
.fch-md-icon--action   { width: 44px; height: 44px; }

/* ---------- Optionale semantische Einfärbung ---------- */
.fch-md-icon--c-yellow { color: var(--event-yellow); }
.fch-md-icon--c-red    { color: var(--event-red); }
.fch-md-icon--c-green  { color: var(--event-green); }
.fch-md-icon--c-brand  { color: var(--fch-green); }