html[data-theme="light"],
:root,
header, /* Ensure page header is always light, so the branding needs to match only a single color scheme */
.branding-header-preview,
.branding-light-preview,
.branding-login-page-preview {
    --primary: #0068f4;
    --secondary: #005bd2;
    --accent: #71b4ff;

    --body-fg: #212121;

    --header-color: #ffffff;
    --header-bg: #0a2136;
    --header-link-color: var(--primary);

    --breadcrumbs-fg: #757575;
    --breadcrumbs-link-fg: var(--breadcrumbs-fg);
    --breadcrumbs-bg: var(--body-bg);

    --page-header-button-border: var(--accent);

    --link-fg: #323232;
    --link-hover-color: var(--primary);

    --inline-link-fg: #1d70b8;
    --inline-link-hover-fg: #003078;
    --inline-link-thickness: max(1px, .0625rem);
    --inline-link-offset: .1578em;
    --inline-link-hover-thickness: max(3px, .1875rem, .12em);

    --inactive-fg: #6b6b6b;
    --disabled-fg: #767676;

    --error-fg: #dc2626;
    --warning-fg: #8e6e06;
    --info-fg: #0068f4;

    --selected-row: #eff6ff;

    --button-bg: var(--primary);
    --close-button-bg: #fff;
    --close-button-hover-bg: #fff;

    --object-tools-bg: var(--button-bg);
    --object-tools-hover-bg: var(--default-button-hover-bg);

    --sortable-table-button-hover-fg: var(--primary);

    --input-fg: #323232;
    --input-bg: #fafafa;
    --input-border: #878787;
    --input-hover-fg: var(--input-fg);
    --input-hover-bg: #f0f0f0;
    --input-hover-border: var(--input-fg);
    --input-focus-fg: var(--input-fg);
    --input-focus-bg: var(--input-hover-bg);
    --input-focus-border: var(--primary);
    --input-active-fg: var(--input-fg);
    --input-active-bg: var(--input-hover-bg);
    --input-active-border: #c3c4c5;

    --placeholder-fg: #707070;

    --button-primary-fg: #f7f7f7;
    --button-primary-bg: var(--primary);
    --button-primary-hover-fg: #ffffff;
    --button-primary-hover-bg: var(--secondary);

    --button-secondary-fg: #323232;
    --button-secondary-bg: #ffffff;
    --button-secondary-border: #323232;
    --button-secondary-hover-fg: #323232;
    --button-secondary-hover-bg: #e6e6e6;
    --button-secondary-hover-border: #323232;

    --button-tertiary-fg: #323232;
    --button-tertiary-bg: #ffffff;
    --button-tertiary-border: #949494;
    --button-tertiary-hover-fg: #ffffff;
    --button-tertiary-hover-bg: var(--primary);
    --button-tertiary-hover-border: var(--button-tertiary-hover-bg);
    
    --component-outline: 2px solid var(--body-fg);
    --component-shadow: 0px 4px 25px 0px #c3c4c566;

    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-medium-color: #444;
    --body-loud-color: #000;
    --link-selected-fg: var(--secondary);
    --hairline-color: #e8e8e8;
    --border-color: #ccc;
    --message-success-bg: #fff;
    --message-warning-bg: #fff;
    --message-error-bg: #fff;
    --darkened-bg: #f8f8f8;
    --selected-bg: #e4e4e4;
    --button-fg: #fff;
    --button-hover-bg: #205067;
    --default-button-bg: #205067;
    --default-button-hover-bg: var(--secondary);
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;
    --object-tools-fg: var(--button-fg);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --component-shadow: 0px 4px 35px 0px #c3c4c511;

        --primary: #4d9aff;
        --secondary: #0f87ff;

        --body-fg: #eeeeee;
        --body-bg: #212121;

        --breadcrumbs-fg: #e0e0e0;
        --breadcrumbs-bg: var(--body-bg);

        --page-header-button-border: var(--accent);

        --link-fg: #eeeeee;
        --link-selected-fg: var(--primary);
        --link-hover-color: var(--primary);

        --inline-link-fg: #2180d4;
        --inline-link-hover-fg: #3892e0;

        --inactive-fg: #a1a1a1;
        --disabled-fg: #888888;

        --hairline-color: #3a3a3a;
        --border-color: #4a4a4a;

        --error-fg: #e35f5f;
        --warning-fg: #af8808;
        --info-fg: #4d9aff;
        --delete-button-bg: #e35f5f;
        --delete-button-hover-bg: #d41c1c;

        --darkened-bg: #323232;

        --close-button-bg: #323232;
        --close-button-hover-bg: #323232;

        --object-tools-fg: var(--body-bg);

        --sortable-table-button-hover-fg: var(--primary);

        --input-fg: #fbfbfb;
        --input-bg: #6b6b6b;
        --input-border: var(--input-bg);
        --input-hover-fg: var(--input-fg);
        --input-hover-bg: #737373;
        --input-hover-border: var(--input-fg);
        --input-focus-border: var(--primary);
        --input-active-fg: var(--input-fg);
        --input-active-bg: var(--input-hover-bg);
        --input-active-border: #c3c4c5;

        --placeholder-fg: #ededed;

        --button-primary-fg: var(--body-bg);
        --button-primary-bg: var(--primary);
        --button-primary-hover-fg: #ffffff;
        --button-primary-hover-bg: var(--secondary);

        --button-secondary-fg: #ffffff;
        --button-secondary-bg: transparent;
        --button-secondary-border: #ffffff;
        --button-secondary-hover-fg: #ffffff;
        --button-secondary-hover-bg: #6b6b6b;
        --button-secondary-hover-border: #ffffff;

        --button-tertiary-fg: #ffffff;
        --button-tertiary-bg: transparent;
        --button-tertiary-border: #777777;
        --button-tertiary-hover-fg: var(--body-bg);
        --button-tertiary-hover-bg: var(--primary);
        --button-tertiary-hover-border: var(--button-tertiary-hover-bg);

        --body-quiet-color: #d0d0d0;
        --body-medium-color: #e0e0e0;
        --body-loud-color: #ffffff;
        --message-success-bg: #212121;
        --message-warning-bg: #212121;
        --message-error-bg: #212121;
        --selected-bg: #1b1b1b;
        --selected-row: #161616;
    }
}


html[data-theme="dark"],
.branding-dark-preview {
    --component-shadow: 0px 4px 35px 0px #c3c4c511;

    --primary: #4d9aff;
    --secondary: #0f87ff;

    --body-fg: #eeeeee;
    --body-bg: #212121;

    --breadcrumbs-fg: #e0e0e0;
    --breadcrumbs-bg: var(--body-bg);

    --page-header-button-border: var(--accent);

    --link-fg: #eeeeee;
    --link-selected-fg: var(--primary);
    --link-hover-color: var(--primary);

    --inline-link-fg: #2180d4;
    --inline-link-hover-fg: #3892e0;

    --inactive-fg: #a1a1a1;
    --disabled-fg: #888888;

    --hairline-color: #3a3a3a;
    --border-color: #4a4a4a;

    --error-fg: #e35f5f;
    --warning-fg: #af8808;
    --info-fg: #4d9aff;
    --delete-button-bg: #e35f5f;
    --delete-button-hover-bg: #ee9696;

    --darkened-bg: #323232;

    --close-button-bg: #323232;
    --close-button-hover-bg: #323232;

    --object-tools-fg: var(--body-bg);

    --sortable-table-button-hover-fg: var(--primary);

    --input-fg: #fbfbfb;
    --input-bg: #6b6b6b;
    --input-border: var(--input-bg);
    --input-hover-fg: var(--input-fg);
    --input-hover-bg: #737373;
    --input-hover-border: var(--input-fg);
    --input-focus-border: var(--primary);
    --input-active-fg: var(--input-fg);
    --input-active-bg: var(--input-hover-bg);
    --input-active-border: #c3c4c5;

    --placeholder-fg: #ededed;

    --button-primary-fg: var(--body-bg);
    --button-primary-bg: var(--primary);
    --button-primary-hover-fg: #ffffff;
    --button-primary-hover-bg: var(--secondary);

    --button-secondary-fg: #ffffff;
    --button-secondary-bg: transparent;
    --button-secondary-border: #ffffff;
    --button-secondary-hover-fg: #ffffff;
    --button-secondary-hover-bg: #6b6b6b;
    --button-secondary-hover-border: #ffffff;

    --button-tertiary-fg: #ffffff;
    --button-tertiary-bg: transparent;
    --button-tertiary-border: #777777;
    --button-tertiary-hover-fg: var(--body-bg);
    --button-tertiary-hover-bg: var(--primary);
    --button-tertiary-hover-border: var(--button-tertiary-hover-bg);

    --body-quiet-color: #d0d0d0;
    --body-medium-color: #e0e0e0;
    --body-loud-color: #ffffff;
    --message-success-bg: #212121;
    --message-warning-bg: #212121;
    --message-error-bg: #212121;
    --selected-bg: #1b1b1b;
    --selected-row: #161616;
}