/**
 * agenic Komponenten-CSS – Pill (Atom) — vollständige Übertragung.
 *
 * Figma-Quelle: Set `pill` (647:1670, Seite 0.5, 72 Varianten seit 25.09.2026; 36 gemessen 26.08.2026):
 *   Farbe   = monochrom · info · success · warning · error · neutral → Modifier (Konturfarbe)
 *             + fusion · erp · crm · brand-hell · brand · brand-dunkel (Farbwelten, 25.09.2026 — s. Ende der Datei)
 *   Inverse = false | true → --inverse (Textfarbe; Kontur nur bei monochrom betroffen)
 *   Größe   = s · m · l → Modifier --groesse-s / --groesse-l (m ist der Basiszustand)
 *             + xl · xxl seit 8.3.0 (nur Code, TMP — s. unten)
 * Kein Fill, Kontur 0.5 px, Radius radius/max, Padding und Textstufe je Größe:
 *   s: spacing/xxs × spacing/xs, Copy/XS → 20 px hoch
 *   m: spacing/xs  × spacing/s,  Copy/XS → 24 px hoch (Vorgabe)
 *   l: spacing/s   × spacing/ms, Copy/S  → 35 px hoch
 * Text Digital/General/Copy/XS (Inter Light 12/16, -2 %), Copy/S (14/19, -2 %).
 * Markup-Partial: includes/render-pill.php. Konsumenten: ag_pill, ag_text_media_panel.
 * Kontrakt: Projekt-Doc `kontrakt-ag-pill.md` v0.1. 0 tmp-Punkte.
 */

.ag-pill,
.ag-pill * {
    box-sizing: border-box;
}

.ag-pill {
    /* L3 mit L2-Defaults */
    --ag-pill-border: var(--color-border);            /* Figma Border */
    --ag-pill-fg: var(--color-text-standard);         /* Figma Text/standard */
    --ag-pill-radius: var(--radius-max);              /* Figma radius/max — Pille in jeder Größe */
    --ag-pill-space-before: 0px;                      /* Control „Abstand davor" (nur Widget ag_pill) */
    --ag-pill-space-after: 0px;                       /* Control „Abstand danach" */

    /* Größe m = Basiszustand. Die Modifier unten überschreiben nur diese vier
       Variablen; ohne Modifier gerendertes Markup (z. B. der Editor-Platzhalter
       in widgets/pill.php) bleibt damit auf der Vorgabestufe. */
    --ag-pill-pad-y: var(--spacing-xs);               /* Figma spacing/xs = 4 */
    --ag-pill-pad-x: var(--spacing-s);                /* Figma spacing/s = 8 */
    --ag-pill-gap: var(--spacing-s);                  /* Figma itemSpacing spacing/s = 8 */
    --ag-pill-fs: var(--fs-100);                      /* Figma Copy/XS 12 */
    --ag-pill-lh: calc(16 / 12);                      /* Figma Copy/XS 16 */

    display: inline-flex;
    align-items: center;
    gap: var(--ag-pill-gap);
    padding: var(--ag-pill-pad-y) var(--ag-pill-pad-x);
    border: 0.5px solid var(--ag-pill-border);
    border-radius: var(--ag-pill-radius);
    margin-block-start: var(--ag-pill-space-before);
    margin-block-end: var(--ag-pill-space-after);
    color: var(--ag-pill-fg);
    font-family: var(--font-sans);
    font-size: var(--ag-pill-fs);
    line-height: var(--ag-pill-lh);
    font-weight: var(--fw-light);
    letter-spacing: -0.02em;                          /* Copy/XS und Copy/S beide -2 % */
    white-space: nowrap;
}

/* ── Größe-Achse (Padding, Gap und Textstufe; Radius bleibt radius/max) ──
   Leiterstufen aus der Figma-Quelle, gemessen 26.08.2026. Die Höhe ergibt
   sich aus Padding + Zeilenhöhe und ist nicht gesetzt. */

.ag-pill--groesse-s {
    --ag-pill-pad-y: var(--spacing-xxs);              /* Figma spacing/xxs = 2 */
    --ag-pill-pad-x: var(--spacing-xs);               /* Figma spacing/xs = 4 */
    --ag-pill-gap: var(--spacing-xs);                 /* Figma itemSpacing spacing/xs = 4 */
}

.ag-pill--groesse-l {
    --ag-pill-pad-y: var(--spacing-s);                /* Figma spacing/s = 8 */
    --ag-pill-pad-x: var(--spacing-ms);               /* Figma spacing/ms = 12 */
    --ag-pill-fs: var(--fs-200);                      /* Figma Copy/S 14 */
    --ag-pill-lh: calc(19 / 14);                      /* Figma Copy/S 19 */
}

/* xl und xxl: seit 8.3.0 für die Tag-Gruppe (Entscheidung Vincent, 23.09.2026:
   Tags standardmäßig 16, kleiner und größer wählbar). Das Figma-Set `pill`
   kennt nur s|m|l — beide Stufen sind TMP und Rückspielpunkt auf 0.8. Die
   Textstufe xl folgt Copy/M (16/21, wie label-16); Polster setzt die Leiter
   fort (l = s×ms). xxl hat keinen Figma-Text-Style, --fs-400 = 18 aus der
   Token-Leiter. */
.ag-pill--groesse-xl {
    --ag-pill-pad-y: var(--spacing-s);                /* tmp — Figma spacing/s = 8 */
    --ag-pill-pad-x: var(--spacing-m);                /* tmp — Figma spacing/m = 16 */
    --ag-pill-fs: var(--fs-300);                      /* tmp — Copy/M 16 */
    --ag-pill-lh: calc(21 / 16);                      /* tmp — Copy/M 21 */
}

.ag-pill--groesse-xxl {
    --ag-pill-pad-y: var(--spacing-ms);               /* tmp — Figma spacing/ms = 12 */
    --ag-pill-pad-x: var(--spacing-ml);               /* tmp — Figma spacing/ml = 24 */
    --ag-pill-fs: var(--fs-400);                      /* tmp — 18, kein Figma-Copy-Style */
    --ag-pill-lh: calc(24 / 18);                      /* tmp */
}

/* ── Farbe-Achse (Konturfarbe; Textfarbe bleibt standard/inverse) ── */

.ag-pill--info    { --ag-pill-border: var(--color-feedback-info); }    /* Figma Feedback/info */
.ag-pill--success { --ag-pill-border: var(--color-feedback-success); } /* Figma Feedback/success */
.ag-pill--warning { --ag-pill-border: var(--color-feedback-warning); } /* Figma Feedback/warning */
.ag-pill--error   { --ag-pill-border: var(--color-feedback-error); }   /* Figma Feedback/error */
.ag-pill--neutral { --ag-pill-border: var(--color-feedback-neutral); } /* Figma Feedback/neutral */

/* ── Inverse-Achse (Kontext dunkle Fläche) ────────────────────────
   Textfarbe wechselt immer; die Kontur nur bei monochrom
   (Feedback-Farben sind in Figma für beide Inverse-Werte identisch). */

.ag-pill--inverse {
    --ag-pill-fg: var(--color-text-inverse-soft);     /* Figma Text/inverse */
}

.ag-pill--monochrom.ag-pill--inverse {
    --ag-pill-border: var(--color-border-inverse);    /* Figma Border--inverse */
}

/* ── Farbwelten (Entscheidung Vincent, 25.09.2026) ──────────────────────
   Figma `pill`: sechs weitere Werte der Achse Farbe (36 → 72 Varianten,
   25.09.2026). Projekt-Doc claude/farbwelten-cards-pills-tags-konzept-25-09.md.
   Die Pill bleibt die leise Schwester des Tags: Schrift Light, Fläche mit
   halber Stärke (`--gradient-flaeche-*-hell-leise`), Kontur als Verlauf.

   Verlaufskontur: zwei Hintergrundlagen — Fläche + Grund im padding-box,
   Verlauf im border-box. Der Grund muss deckend sein, sonst scheint der
   Verlauf durch die Fläche. Deshalb `--ag-pill-grund` (Default lightest);
   Konsumenten auf anderer Fläche setzen ihn (Karte, dunkle Sektion).
   ABWEICHUNG von der Quelle: Kontur 1 px statt 0,5 px — ein Verlauf zerfällt
   bei 0,5 px in Pixelreste. Nur für fusion/erp/crm; Rückspielpunkt 0.8. */
.ag-pill {
    --ag-pill-grund: var(--color-surface-lightest);   /* Figma Surface/lightest — Grund unter der Verlaufsfläche */
}
.ag-pill--inverse {
    --ag-pill-grund: var(--color-surface-darkest);     /* Figma Surface/darkest */
}
.ag-pill--fusion,
.ag-pill--erp,
.ag-pill--crm {
    border: 1px solid transparent;
    background:
        var(--ag-pill-flaeche) padding-box,
        linear-gradient(var(--ag-pill-grund), var(--ag-pill-grund)) padding-box,
        var(--ag-pill-kontur) border-box;
}
.ag-pill--fusion { --ag-pill-flaeche: var(--gradient-flaeche-fusion-hell-leise); --ag-pill-kontur: var(--gradient-fusion-basic); } /* Figma Fusion | Flaeche/fusion-hell-leise · Kontur fusion-basic */
.ag-pill--erp    { --ag-pill-flaeche: var(--gradient-flaeche-erp-hell-leise);    --ag-pill-kontur: var(--gradient-kontur-erp); }   /* Figma Fusion | Flaeche/erp-hell-leise · Kontur/erp */
.ag-pill--crm    { --ag-pill-flaeche: var(--gradient-flaeche-crm-hell-leise);    --ag-pill-kontur: var(--gradient-kontur-crm); }   /* Figma Fusion | Flaeche/crm-hell-leise · Kontur/crm */

/* Brand-Stufen: flach, Kontur 0,5 px wie die Quelle */
.ag-pill--brand-hell   { background: var(--color-surface-brand-hell);   --ag-pill-border: var(--color-border-brand-hell); }   /* Figma Surface/brand-hell · Border--brand-hell */
.ag-pill--brand        { background: var(--color-surface-brand-tint);   --ag-pill-border: var(--color-surface-brand); }        /* Figma Surface/brand-tint · Surface/brand */
.ag-pill--brand-dunkel { background: var(--color-surface-brand-dunkel); --ag-pill-border: var(--color-border-brand-dunkel); --ag-pill-fg: var(--color-text-inverse-soft); } /* Figma Surface/brand-dunkel · Border--brand-dunkel · Text/inverse */
/* Helle Brand-Flächen behalten dunklen Text, auch auf dunkler Sektion
   (Inverse-Achse färbt sonst die Schrift hell). */
.ag-pill--brand-hell.ag-pill--inverse,
.ag-pill--brand.ag-pill--inverse { --ag-pill-fg: var(--color-text-standard); }