/* Loaded only for zladmin.cfd and its www alias. */
:root,
html[data-theme] {
    --primary: #6b21a8;
    --secondary: #581c87;
    --accent: #fff;
    --primary-fg: #fff;

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

    --breadcrumbs-fg: #e9d5ff;
    --breadcrumbs-link-fg: #fff;
    --breadcrumbs-bg: #3b0764;

    --link-selected-fg: var(--link-fg);
    --button-fg: #fff;
    --button-bg: var(--secondary);
    --button-hover-bg: #3b0764;
    --default-button-bg: #3b0764;
    --default-button-hover-bg: var(--secondary);
    --object-tools-fg: #fff;
    --object-tools-bg: var(--secondary);
    --object-tools-hover-bg: var(--button-hover-bg);
}

:root,
html[data-theme="light"] {
    --body-fg: #2e203b;
    --body-bg: #fdfaff;
    --body-quiet-color: #65546f;
    --body-medium-color: #4c3a59;
    --body-loud-color: #210d30;
    --link-fg: #6b21a8;
    --link-hover-color: #581c87;
    --hairline-color: #e9d5ff;
    --border-color: #d8b4fe;
    --darkened-bg: #faf5ff;
    --selected-bg: #f3e8ff;
    --selected-row: #e9d5ff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-fg: #efe7f5;
        --body-bg: #18101f;
        --body-quiet-color: #cdbbd8;
        --body-medium-color: #e1d2ec;
        --body-loud-color: #fff;
        --link-fg: #d8b4fe;
        --link-hover-color: #e9d5ff;
        --hairline-color: #35233f;
        --border-color: #533861;
        --darkened-bg: #23162e;
        --selected-bg: #35203f;
        --selected-row: #442451;
    }
}

html[data-theme="dark"] {
    --body-fg: #efe7f5;
    --body-bg: #18101f;
    --body-quiet-color: #cdbbd8;
    --body-medium-color: #e1d2ec;
    --body-loud-color: #fff;
    --link-fg: #d8b4fe;
    --link-hover-color: #e9d5ff;
    --hairline-color: #35233f;
    --border-color: #533861;
    --darkened-bg: #23162e;
    --selected-bg: #35203f;
    --selected-row: #442451;
}

/* The summary page has its own fixed surface colors. */
#content .owner-block {
    border-color: var(--border-color);
    background: var(--body-bg);
}

#content .owner-table th,
#content .owner-table td {
    border-bottom-color: var(--hairline-color);
}

#content .owner-table th {
    background: var(--darkened-bg);
}