/* =====================================================================
   Brand-Tokens · markenabhängige Formen und Farben
   =====================================================================

   Die Werte hier sind die Defaults der Marke SellerSecure. Eine andere
   Marke überschreibt einzelne Tokens über ein <style>-Block im Layout,
   gespeist aus `theme` in config/branding.php (siehe BrandHelper::cssVariables).

   Warum eigene Klassen statt Tailwind-Utilities: die markenabhängigen
   Eigenschaften (Radius, Akzentfarbe, Schriftgewicht im Menü, Balkenhöhe)
   liegen damit an EINER Stelle statt in jedem Template. Alles, was für alle
   Marken gleich bleibt (Layout, Abstände, Responsive), bleibt Tailwind.

   Wichtig: Tailwind lädt per CDN und injiziert sein <style> NACH dieser
   Datei. Wo eine Utility dieselbe Eigenschaft setzt, gewinnt Tailwind —
   deshalb müssen konkurrierende Utilities aus dem Markup entfernt werden,
   statt sich auf Überschreiben zu verlassen.
   ===================================================================== */

:root {
    /* Akzent — Primärbutton, Hover im Menü */
    --brand-accent: #008DFF;
    --brand-accent-hover: #006ed6;
    --brand-accent-contrast: #ffffff;

    /* Kopfleiste */
    --brand-header-bg: #ffffff;
    --brand-header-border: #e5e7eb;
    --brand-header-padding-y: 1.25rem;

    /* Menü */
    --brand-nav-link-size: 0.875rem;
    --brand-nav-link-weight: 600;
    --brand-nav-link-leading: 1.5rem;
    --brand-nav-link-color: #0f172a;
    --brand-nav-link-hover: var(--brand-accent);
    --brand-nav-link-muted: #94a3b8;

    /* Buttons */
    --brand-btn-radius: 9999px;
    --brand-btn-padding-x: 1rem;
    --brand-btn-padding-y: 0.5rem;
    --brand-btn-size: 0.875rem;
    --brand-btn-weight: 600;
    --brand-btn-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --brand-btn-dark-bg: #0f172a;
    --brand-btn-dark-hover: #0b1120;
    /* Vollbreite Variante im mobilen Menü — eigene Form, eigener Radius. */
    --brand-btn-block-radius: 0.5rem;
    /* Bedienelemente in der Kopfleiste (Rollenwahl, Zeitmodus, Benutzermenü). */
    --brand-pill-radius: 9999px;
}

/* ---------------------------------------------------------------- Kopfleiste */

.brand-header {
    background-color: var(--brand-header-bg);
    border-bottom: 1px solid var(--brand-header-border);
}

.brand-nav {
    padding-top: var(--brand-header-padding-y);
    padding-bottom: var(--brand-header-padding-y);
}

/* ---------------------------------------------------------------- Menü */

.brand-nav-link {
    font-size: var(--brand-nav-link-size);
    font-weight: var(--brand-nav-link-weight);
    line-height: var(--brand-nav-link-leading);
    color: var(--brand-nav-link-color);
    transition: color 150ms ease;
}

.brand-nav-link:hover {
    color: var(--brand-nav-link-hover);
}

/* Deaktivierter Menüpunkt — kein Hover-Wechsel. */
.brand-nav-link--muted,
.brand-nav-link--muted:hover {
    color: var(--brand-nav-link-muted);
}

/* ---------------------------------------------------------------- Buttons */

.brand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: var(--brand-btn-radius);
    padding: var(--brand-btn-padding-y) var(--brand-btn-padding-x);
    font-size: var(--brand-btn-size);
    font-weight: var(--brand-btn-weight);
    line-height: 1.25rem;
    box-shadow: var(--brand-btn-shadow);
    transition: background-color 150ms ease, color 150ms ease;
}

.brand-btn--primary {
    background-color: var(--brand-accent);
    color: var(--brand-accent-contrast);
}

.brand-btn--primary:hover {
    background-color: var(--brand-accent-hover);
}

.brand-btn--dark {
    background-color: var(--brand-btn-dark-bg);
    color: #ffffff;
}

.brand-btn--dark:hover {
    background-color: var(--brand-btn-dark-hover);
}

/*
 * Vollbreite Variante im mobilen Menü. Wird ANSTELLE von .brand-btn benutzt
 * (eigene Form), zusammen mit einer Farbvariante wie .brand-btn--primary.
 */
.brand-btn--block {
    display: block;
    width: 100%;
    border-radius: var(--brand-btn-block-radius);
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-weight: var(--brand-btn-weight);
    line-height: 1.5rem;
    transition: background-color 150ms ease, color 150ms ease;
}

/*
 * Bedienelemente in der Kopfleiste (Rollenwahl, Zeitmodus, Benutzermenü).
 * Nur die Form — Rahmen, Farben und Abstände bleiben pro Element im Markup,
 * weil sie sich zwischen den Marken nicht unterscheiden.
 */
.brand-pill {
    border-radius: var(--brand-pill-radius);
}