/*
 * Quokkast-Brand-Theme.
 * Farben aus dem Logo (logo_quokkast.png):
 *   Navy/Marine  #1a2535  - Monitor + Schriftzug
 *   Orange       #e88a45  - Quokka-Fell + Play-Highlight
 *   Cream        #f3ead8  - Quokka-Bauch (helle Schrift)
 *   Gruen        #7fb53f  - Up-Arrow
 *   Rot-Orange   #d44c2a  - Down-Arrow
 *
 * Variablen aus Deccsters default_dark.css werden hier ueberschrieben.
 */

:root {
    /* Background-Stack auf Navy-Basis */
    --background-darker-color: #0d141d;
    --background-little-darker-color: #131c28;
    --background-color: #1a2535;
    --background-littel-lighter-color: #243045;
    --background-lighter-color: #2c3c54;
    --background-more-lighter-color: #3a4d6a;
    --background-super-light-color: #4d6485;

    --content-box-color: #131c28;

    /* Foreground in warmem Creme statt neutralem Weiss */
    --foreground-color: #f3ead8;
    --foreground-medium-soft-color: rgba(243, 234, 216, 0.75);
    --foreground-soft-color: rgba(243, 234, 216, 0.55);

    /* Call-to-Action = Quokka-Orange */
    --call-to-action-color: #e88a45;
    --call-to-action-dark-color: #b66726;
    --call-to-action-light-color: #f0a468;
    --call-to-action-lighter-color: #f6bd91;

    /* Semantik-Farben aus den Logo-Pfeilen */
    --success-color: #7fb53f;
    --warn-color: #d97f3e;
    --error-color: #d44c2a;

    /* Borders im Navy-Stack ziehen */
    --grey-light-color: #6c7d96;
    --grey-dark-color: #2c3c54;
    --grey-darker-color: #1a2535;

    /* Spinner / Selection-Highlights */
    --spinner-color: var(--call-to-action-color);
}

/* ---------- Logo-Komponente ---------- */

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--foreground-color);
    text-decoration: none;
}

.brand-logo img {
    height: 56px;
    width: auto;
    display: block;
}

.brand-logo.is-small img {
    height: 36px;
}