/* ==========================================================================
   CRAiD Icons — Groessen und Rollen
   Setzt design-tokens/tokens.css voraus. Dort stehen die Werte, hier nur
   die Klassen. Wer diese Datei ohne tokens.css einbindet, bekommt Icons
   ohne Plakettengrund und ohne Akzentfarbe -- das ist Absicht: es darf
   keine zweite Stelle geben, an der jemand eine Farbe pflegt.
   ========================================================================== */

.craid-icon {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  color: var(--craid-ink);   /* die Tinte. currentColor in jedem Icon folgt ihr. */
}

/* Groessen. Der Strich skaliert absichtlich MIT, anders als in Figma:
   im Web ist ein Icon ein Bild, das man vergroessert, kein neu gezeichnetes.
   Wer den Strich konstant halten will, nimmt --craid-icon-stroke-fixed. */
.craid-icon--16 { width: 16px; height: 16px; }
.craid-icon--20 { width: 20px; height: 20px; }
.craid-icon--24 { width: 24px; height: 24px; }
.craid-icon--32 { width: 32px; height: 32px; }
.craid-icon--40 { width: 40px; height: 40px; }
.craid-icon--64 { width: 64px; height: 64px; }

/* Tinte umschalten, ohne das Icon anzufassen. */
.craid-icon--muted   { color: var(--craid-slate); }
.craid-icon--inverse { color: var(--craid-paper); }
.craid-icon--accent  { color: var(--craid-pink); }

/* Strich konstant halten (Figma-Verhalten). Nur fuer Outline/Accent sinnvoll;
   Badge-Icons tragen zwei Strichbreiten und bleiben davon unberuehrt. */
.craid-icon--stroke-fixed { vector-effect: non-scaling-stroke; }
.craid-icon--stroke-fixed path { vector-effect: non-scaling-stroke; }