/* ButterflyOS: die drei Zustände Raupe, Kokon, Schmetterling
   Raupe          = Woher  · Status quo, Beginn der Transformation
   Kokon          = Womit  · Transformationsprogramm
   Schmetterling  = Wohin  · Vision, Strategie, OKR, Anforderungen (der Intent)

   Regeln:
   --bos-<zustand>        Icon, Linien, Punkte (mind. 3:1 Kontrast)
   --bos-<zustand>-text   Text in Zustandsfarbe (mind. 4.5:1 Kontrast)
   --bos-<zustand>-tint   Hintergrund hinter Icon oder Badge
   --bos-dna              die goldene Verbindungslinie (Strategy DNA), nur dekorativ
*/

:root {
  --bos-raupe: #2E8B62;
  --bos-raupe-text: #24704F;
  --bos-raupe-tint: #E3F3EA;

  --bos-kokon: #A8741A;
  --bos-kokon-text: #8F6214;
  --bos-kokon-tint: #FAF0DC;

  --bos-schmetterling: #3B93C8; /* identisch mit Logo-Blau */
  --bos-schmetterling-text: #1F6E9E;
  --bos-schmetterling-tint: #E4F0F8;

  --bos-dna: #D9A93F;
}

/* Dark Mode: per Klasse am <html> oder per Systemeinstellung.
   An euren bestehenden Dark-Mode-Schalter anpassen, falls er anders heißt. */
:root.dark,
:root[data-theme="dark"] {
  --bos-raupe: #6CCB9A;
  --bos-raupe-text: #6CCB9A;
  --bos-raupe-tint: #16302A;

  --bos-kokon: #E3B552;
  --bos-kokon-text: #E3B552;
  --bos-kokon-tint: #2E2614;

  --bos-schmetterling: #4FA6DA;
  --bos-schmetterling-text: #4FA6DA;
  --bos-schmetterling-tint: #132A40;

  --bos-dna: #E3B552;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    --bos-raupe: #6CCB9A;
    --bos-raupe-text: #6CCB9A;
    --bos-raupe-tint: #16302A;
    --bos-kokon: #E3B552;
    --bos-kokon-text: #E3B552;
    --bos-kokon-tint: #2E2614;
    --bos-schmetterling: #4FA6DA;
    --bos-schmetterling-text: #4FA6DA;
    --bos-schmetterling-tint: #132A40;
    --bos-dna: #E3B552;
  }
}

/* Badge: Icon + Label, z. B. in Listen und Detailköpfen */
.bos-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.bos-state-badge[data-state="raupe"] { background: var(--bos-raupe-tint); color: var(--bos-raupe-text); }
.bos-state-badge[data-state="kokon"] { background: var(--bos-kokon-tint); color: var(--bos-kokon-text); }
.bos-state-badge[data-state="schmetterling"] { background: var(--bos-schmetterling-tint); color: var(--bos-schmetterling-text); }

/* Kachel: Icon in getönter Fläche, z. B. vor Listeneinträgen */
.bos-state-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.bos-state-tile[data-state="raupe"] { background: var(--bos-raupe-tint); color: var(--bos-raupe); }
.bos-state-tile[data-state="kokon"] { background: var(--bos-kokon-tint); color: var(--bos-kokon); }
.bos-state-tile[data-state="schmetterling"] { background: var(--bos-schmetterling-tint); color: var(--bos-schmetterling); }