/* rugbyrefs.de – zentrale Farben. Hier ändern, keine UIkit-Dateien bearbeiten.
   Grundfarben wirken auf alle davon abgeleiteten Komponenten.
   Eine Komponentenvariable kann unabhängig überschrieben werden. */
:root {
    /* Grundfarben */
    --primary-color: #7FFF00;
    --secondary-color: #1D3557;
    --text-color: #1D3557;
    --muted-text-color: #8D99AE;
    --background-color: #EDF2F4;
    --surface-color: #ffffff;
    --muted-background-color: var(--surface-color);
    --border-color: var(--background-color);
    --focus-color: var(--secondary-color);

    /* Logo, Navigation und Überschriften */
    --logo-color: var(--surface-color);
    --logo-accent-color: var(--primary-color);
    --logo-hover-color: var(--primary-color);
    /* SVG-Logo: diese bestehenden Variablen steuern die Höhe in px. */
    --logo-font-size: 56px;
    --logo-scrolled-font-size: 36px;
    --logo-mobile-font-size: 38px;
    --logo-mobile-scrolled-font-size: 28px;

    /* Abstand jeweils oberhalb UND unterhalb des Logos. */
    --navbar-logo-spacing: 23px;
    --navbar-scrolled-logo-spacing: 13px;
    --navbar-mobile-logo-spacing: 20px;
    --navbar-mobile-scrolled-logo-spacing: 10px;

    /* Gesamthöhen: automatisch aus Logo + zweimal Abstand berechnet.
       Für eine feste Gesamthöhe kann hier stattdessen z.B. 100px stehen. */
    --navbar-desktop-height: calc(var(--logo-font-size) + 2 * var(--navbar-logo-spacing));
    --navbar-desktop-scrolled-height: calc(var(--logo-scrolled-font-size) + 2 * var(--navbar-scrolled-logo-spacing));
    --navbar-mobile-height: calc(var(--logo-mobile-font-size) + 2 * var(--navbar-mobile-logo-spacing));
    --navbar-mobile-scrolled-height: calc(var(--logo-mobile-scrolled-font-size) + 2 * var(--navbar-mobile-scrolled-logo-spacing));
    --navbar-height: var(--navbar-desktop-height);
    --navbar-background-color: var(--secondary-color);
    --navbar-border-color: transparent;
    --navbar-border-width: 0px;
    --navbar-muted-color: var(--nav-link-color);
    --nav-link-color: var(--background-color);
    --nav-link-hover-color: var(--primary-color);
    --nav-accent-color: var(--primary-color);
    --headline-color: var(--text-color);
    --day-heading-color: var(--headline-color);
    --day-heading-line-color: var(--primary-color);
    --column-heading-color: var(--text-color);
    --column-heading-background-color: color-mix(in srgb, var(--primary-color) 10%, var(--surface-color));
    --column-heading-border-color: var(--border-color);
    --link-underline-color: var(--muted-text-color);
    --link-hover-color: var(--secondary-color);
    --tab-color: var(--text-color);
    --tab-active-color: var(--text-color);
    --tab-hover-color: var(--text-color);
    --tab-hover-border-color: var(--tab-active-color);
    --period-background-color: var(--surface-color);
    --period-headline-color: var(--headline-color);

    /* Spieleinträge */
    --entry-text-color: var(--text-color);
    --entry-background-color: var(--surface-color);
    --entry-hover-background-color: var(--column-heading-background-color);
    --entry-border-color: var(--border-color);
    --team-color: var(--entry-text-color);
    --kickoff-color: var(--entry-text-color);
    --competition-color: var(--entry-text-color);
    --official-color: var(--entry-text-color);
    --role-color: var(--entry-text-color);
    --venue-color: var(--text-color);
    --unconfirmed-color: var(--muted-text-color);
    --badge-color: var(--surface-color);
    --badge-background-color: var(--secondary-color);
    --badge-hover-color: var(--primary-color);
    --badge-hover-background-color: var(--secondary-color);
    --icon-hover-background-color: transparent;
    --icon-hover-color: var(--text-color);

    /* Buttons, Formulare, Dropdown */
    --button-background-color: var(--primary-button-background-color);
    --button-color: var(--primary-button-color);
    --button-border-color: var(--primary-button-border-color);
    --button-hover-background-color: var(--primary-button-hover-background-color);
    --button-hover-color: var(--primary-button-hover-color);
    --button-hover-border-color: var(--primary-button-hover-border-color);
    --primary-button-background-color: var(--primary-color);
    --primary-button-color: var(--text-color);
    --primary-button-border-color: var(--primary-button-background-color);
    --primary-button-hover-background-color: var(--secondary-color);
    --primary-button-hover-color: var(--primary-color);
    --primary-button-hover-border-color: var(--secondary-color);
    --arrow-button-background-color: var(--primary-color);
    --arrow-button-color: var(--secondary-color);
    --arrow-button-border-color: var(--arrow-button-background-color);
    --arrow-button-hover-background-color: var(--secondary-color);
    --arrow-button-hover-color: var(--primary-color);
    --arrow-button-hover-border-color: var(--secondary-color);
    /* Verbandslisten-Aktionen bleiben unabhängig von --button-*. */
    --association-button-background-color: var(--surface-color);
    --association-button-color: var(--text-color);
    --association-button-border-color: var(--border-color);
    --association-button-hover-background-color: var(--surface-color);
    --association-button-hover-color: var(--text-color);
    --association-button-hover-border-color: var(--text-color);
    --input-background-color: var(--surface-color);
    --input-color: var(--text-color);
    --input-border-color: var(--surface-color);
    --input-focus-border-color: var(--secondary-color);
    --input-label-color: var(--secondary-color);
    --input-placeholder-color: var(--muted-text-color);
    --dropdown-background-color: var(--surface-color);
    --dropdown-color: var(--text-color);
    --dropdown-border-color: var(--border-color);
    --checkbox-color: var(--primary-color);
    --checkbox-border-color: var(--surface-color);
    /* Nur Checkbox-Felder innerhalb der Verbandsliste. */
    --association-checkbox-background-color: var(--background-color);
    --association-checkbox-border-color: var(--background-color);
    --association-checkbox-checked-background-color: var(--checkbox-color);
    --association-checkbox-checked-border-color: var(--checkbox-color);
    --association-checkbox-mark-color: var(--text-color);
    --association-checkbox-focus-border-color: var(--focus-color);

    /* Tooltip, Status, Meldungen und Footer */
    --tooltip-background-color: var(--secondary-color);
    --tooltip-color: var(--surface-color);
    --status-background-color: var(--background-color);
    --status-color: var(--text-color);
    --status-border-color: var(--border-color);
    --status-separator-color: var(--text-color);
    --warning-background-color: #C4162D;
    --warning-color: var(--surface-color);
    --warning-border-color: #C4162D;
    --saved-fixture-note-color: #855316;
    --error-color: #C4162D;
    --footer-background-color: var(--surface-color);
    --footer-color: var(--secondary-color);
    --footer-muted-color: var(--text-color);
    --legend-color: var(--text-color);
}

/* Aktive Höhe für Navbar und Sticky-Spaltenüberschriften. */
:root.is-scrolled { --navbar-height: var(--navbar-desktop-scrolled-height); }
@media (max-width: 639px) {
    :root { --navbar-height: var(--navbar-mobile-height); }
    :root.is-scrolled { --navbar-height: var(--navbar-mobile-scrolled-height); }
}