/*
    Daily Reader — Django admin brand theme
    Brand color extracted from the Daily Reader app icon: #ff4400
*/

:root,
html[data-theme="light"] {
    --primary: #ff4400;
    --secondary: #cc3700;
    --accent: #ffc107;
    --primary-fg: #fff;

    --header-color: #fff;
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #ffd9c2;
    --breadcrumbs-link-fg: #fff;
    --breadcrumbs-bg: #7a2400;

    --link-fg: #cc3700;
    --link-hover-color: #ff4400;
    --link-selected-fg: var(--secondary);

    --selected-row: #ffe8d9;

    --button-bg: var(--secondary);
    --button-hover-bg: #a32d00;
    --default-button-bg: #a32d00;
    --default-button-hover-bg: var(--secondary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #ff6a33;
        --secondary: #b23a00;
        --accent: #ffb300;
        --primary-fg: #fff;

        --header-color: #fff;
        --header-branding-color: var(--accent);
        --header-bg: var(--secondary);
        --header-link-color: var(--primary-fg);

        --breadcrumbs-fg: #f0c4a8;
        --breadcrumbs-link-fg: #fff;
        --breadcrumbs-bg: #5c1d00;

        --link-fg: #ff8a52;
        --link-hover-color: #ffb08a;
        --link-selected-fg: var(--secondary);

        --selected-row: #3a1c0a;

        --button-bg: var(--secondary);
        --button-hover-bg: #7a2400;
        --default-button-bg: #7a2400;
        --default-button-hover-bg: var(--secondary);
    }
}

html[data-theme="dark"] {
    --primary: #ff6a33;
    --secondary: #b23a00;
    --accent: #ffb300;
    --primary-fg: #fff;

    --header-color: #fff;
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #f0c4a8;
    --breadcrumbs-link-fg: #fff;
    --breadcrumbs-bg: #5c1d00;

    --link-fg: #ff8a52;
    --link-hover-color: #ffb08a;
    --link-selected-fg: var(--secondary);

    --selected-row: #3a1c0a;

    --button-bg: var(--secondary);
    --button-hover-bg: #7a2400;
    --default-button-bg: #7a2400;
    --default-button-hover-bg: var(--secondary);
}

/* BRANDING */

#branding {
    align-items: center;
}

#site-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

#site-name a {
    display: flex;
    align-items: center;
    gap: 10px;
}

#branding-logo {
    display: block;
    height: 30px;
    width: auto;
}

.login #branding {
    justify-content: center;
}

.login #site-name {
    font-size: 1.25rem;
}