/* ═══════════════════════════════════════════════════════
   Kaderheld – Theme Token Layer (T8)

   Sitzt VOR site.css und ueberbruekt die alte hartkodierte
   --accent-Variable mit einer pro Verein einstellbaren
   Primary-Farbe. Wird vom _Layout per inline-style mit den
   konkreten Hex-Werten gefuetterten (siehe ThemeResolverService).
═══════════════════════════════════════════════════════ */

:root {
    /* ── Die Marke ────────────────────────────────────────
       Aus dem offiziellen Logo gemessen; dieselben Werte wie in `ReelMarke`, damit App und Reel
       nicht auseinanderlaufen. Diese drei Tokens sind IMMER Kaderheld und werden nie von einer
       Vereinsfarbe ueberschrieben — fuer alles, was die App selbst ist (Anmeldung, Hinweise auf
       das Produkt, Marken-Flaechen). */
    --marke-gruen:  #0F4230;
    --marke-orange: #D96A24;
    --marke-creme:  #F4EEE2;

    /* Default-Werte — werden vom _Layout per inline-style ueberschrieben,
       sobald ein Verein zugeordnet ist. Ohne Verein gilt die Marke. */
    --color-primary:            #0F4230;
    --color-primary-hover:      #0D3A2A;
    --color-primary-foreground: #FFFFFF;
    --color-primary-rgb:        15, 66, 48;
    /* Die Vereinsfarbe als TEXT: hell identisch mit --color-primary; im Dunkelmodus aufgehellt
       (site.css), weil ein dunkles Gruen oder Blau auf dunklem Grund unlesbar ist (1,5:1). */
    --color-primary-text:       var(--color-primary);
}

/* Brueckenschlag zum alten site.css: --accent referenziert --color-primary */
:root {
    --accent:        var(--color-primary);
    --accent-hover:  var(--color-primary-hover);
    --accent-soft:   rgba(var(--color-primary-rgb), 0.12);
    --accent-glow:   rgba(var(--color-primary-rgb), 0.25);
    --border-accent: rgba(var(--color-primary-rgb), 0.40);
}

/* Bootstrap-Primary-Override: damit Bootstrap-Buttons/Links die Vereinsfarbe verwenden */
:root {
    --bs-primary:     var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-link-color:           var(--color-primary);
    --bs-link-color-rgb:       var(--color-primary-rgb);
    --bs-link-hover-color:     var(--color-primary-hover);
    --bs-link-hover-color-rgb: var(--color-primary-rgb);
}

.btn-primary {
    --bs-btn-bg:           var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-color:        var(--color-primary-foreground);
    --bs-btn-hover-bg:     var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-hover-color:        var(--color-primary-foreground);
    --bs-btn-active-bg:     var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-active-color:        var(--color-primary-foreground);
    --bs-btn-disabled-bg:           var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-disabled-color:        var(--color-primary-foreground);
}

.btn-outline-primary {
    --bs-btn-color:        var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg:     var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-hover-color:        var(--color-primary-foreground);
    --bs-btn-active-bg:           var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-active-color:        var(--color-primary-foreground);
}

.bg-primary { background-color: var(--color-primary) !important; color: var(--color-primary-foreground) !important; }
.text-primary { color: var(--color-primary-text) !important; }
/* Umriss-Knoepfe tragen die Vereinsfarbe als TEXT — im Dunkelmodus die aufgehellte Fassung. */
.btn-outline-primary { color: var(--color-primary-text); }
.btn-outline-primary:hover { color: var(--color-primary-foreground); }
.border-primary { border-color: var(--color-primary) !important; }
.badge.bg-primary { background-color: var(--color-primary) !important; color: var(--color-primary-foreground) !important; }

/* ── Abzeichen: Bootstrap-Standardfarben an die App-Tokens binden ────────────────────────────
   In der App stehen 92 Abzeichen mit `badge bg-*` bzw. `text-bg-*`. Keine dieser Klassen war
   gebunden — sie rendern Bootstraps Auslieferungsfarben: Grau #6c757d, Blau #0d6efd, Cyan
   #0dcaf0. In einer dunkelgrünen Marke sieht das aus wie ein fremdes Framework, das jemand
   darübergelegt hat, und es war der stärkste Grund für den „wie aus den 90ern"-Eindruck.

   Gebunden wird hier zentral, nicht an den 92 Fundstellen: Ein Abzeichen soll seine Farbe aus
   dem Token-Satz bekommen wie alles andere auch, und eine spätere Farbänderung darf nicht
   92 Dateien betreffen.

   `text-bg-*` setzt in Bootstrap Hintergrund UND Schriftfarbe. Beides kommt jetzt aus
   demselben Token-Paar — die Regel „Grund und Schrift aus einer Quelle" (siehe
   FarbTokenKonventionTests) gilt auch hier. */
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-light,     .badge.text-bg-light {
    background-color: var(--bg-hover) !important;
    color: var(--text-secondary) !important;
}
.badge.bg-success, .badge.text-bg-success {
    background-color: var(--success-bg) !important;
    color: var(--success-text) !important;
}
.badge.bg-warning, .badge.text-bg-warning {
    background-color: var(--warning-bg) !important;
    color: var(--warning-text) !important;
}
.badge.bg-danger, .badge.text-bg-danger {
    background-color: var(--danger-bg) !important;
    color: var(--danger-text) !important;
}
.badge.bg-info, .badge.text-bg-info {
    background-color: var(--info-bg) !important;
    color: var(--info-text) !important;
}
.badge.text-bg-primary {
    background-color: var(--primary-bg) !important;
    color: var(--color-primary-text) !important;
}

/* Abzeichen sind Beschriftungen, keine Knöpfe: etwas kleiner, ruhiger gesetzt, rund. */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 999px;
    padding: .3em .65em;
}


/* Bootstraps .text-muted ist eine feste Farbe (#6c757d) und im Dunkelmodus auf --bg-surface bei 1,4:1 unlesbar — an den Token binden. */
.text-muted { color: var(--text-muted) !important; }