:root {
    /* Use D+H colors */
    --dh-color-primary: #e10025;
    --dh-color-secondary: #3b3b3b;
    --dh-color-background: #f5f5f5;
    --dh-color-background-dark: #3d3e40;

    /* Reduce spacers to make a more dense layout */
    --pf-v5-global--spacer--xs: 0.25rem;
    --pf-v5-global--spacer--sm: 0.5rem;
    --pf-v5-global--spacer--md: 1rem;
    --pf-v5-global--spacer--lg: 1rem;
    --pf-v5-global--spacer--xl: 1.5rem;
    --pf-v5-global--spacer--2xl: 2rem;
    --pf-v5-global--spacer--3xl: 2.5rem;
    --pf-v5-global--spacer--4xl: 3rem;

    /* Reduce gutters to make a more dense layout */
    --pf-v5-global--gutter: 0.75rem;
    --pf-v5-global--gutter--md: 1rem;

    /* Make corners crisp */
    --pf-v5-global--BorderRadius--sm: 0px;
    --pf-v5-global--BorderRadius--lg: 30em;
}

:root {
    /* Apply custom colors to Patternfly palette */
    --pf-v5-global--primary-color--100: var(--dh-color-primary);
    --pf-v5-global--primary-color--200: var(--dh-color-primary);
    --pf-v5-global--primary-color--300: var(--dh-color-primary);
    --pf-v5-global--primary-color--400: var(--dh-color-background);
    --pf-global--primary-color--100: var(--dh-color-primary);
    --pf-global--primary-color--200: var(--dh-color-primary);
    --pf-global--primary-color--300: var(--dh-color-primary);
    --pf-global--primary-color--400: var(--dh-color-background);

    --pf-v5-global--primary-color--dark-100: var(--dh-color-primary);
    --pf-v5-global--primary-color--dark-200: var(--dh-color-primary);
    --pf-v5-global--primary-color--dark-300: var(--dh-color-primary);
    --pf-v5-global--primary-color--dark-400: var(--dh-color-background);
    --pf-global--primary-color--dark-100: var(--dh-color-primary);
    --pf-global--primary-color--dark-200: var(--dh-color-primary);
    --pf-global--primary-color--dark-300: var(--dh-color-primary);
    --pf-global--primary-color--dark-400: var(--dh-color-background);

    --pf-v5-global--secondary-color--100: var(--dh-color-secondary);
    --pf-global--secondary-color--100: var(--dh-color-secondary);

    --pf-v5-global--secondary-color--dark-100: var(--dh-color-background);
    --pf-global--secondary-color--dark-100: var(--dh-color-background);

    --pf-v5-global--active-color--100: var(--dh-color-primary);
    --pf-v5-global--active-color--200: var(--dh-color-primary);
    --pf-v5-global--active-color--300: var(--dh-color-primary);
    --pf-v5-global--active-color--400: var(--dh-color-primary);
    --pf-global--active-color--100: var(--dh-color-primary);
    --pf-global--active-color--200: var(--dh-color-primary);
    --pf-global--active-color--300: var(--dh-color-primary);
    --pf-global--active-color--400: var(--dh-color-primary);

    --pf-v5-global--link--Color: var(--dh-color-primary);
    --pf-v5-global--link--Color--hover: var(--dh-color-primary);
    --pf-global--link--Color: var(--dh-color-primary);
    --pf-global--link--Color--hover: var(--dh-color-primary);

    --pf-v5-global--link--Color--dark: var(--dh-color-primary);
    --pf-global--link--Color--dark: var(--dh-color-primary);

    --pf-v5-global--BackgroundColor--100: var(--dh-color-background);
    --pf-v5-global--BackgroundColor--300: var(--dh-color-background-dark);
    --pf-global--BackgroundColor--100: var(--dh-color-background);
    --pf-global--BackgroundColor--300: var(--dh-color-background-dark);

    --pf-v5-global--BackgroundColor--dark--100: var(--dh-color-secondary);
    --pf-global--BackgroundColor--dark--100: var(--dh-color-secondary);

    /* Use primary color for card top */
    --keycloak-card-top-color: var(--pf-v5-global--primary-color--100);
}

.login-pf.pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary:hover {
    /* Use dark primary color for secondary button hover */
    color: var(--pf-v5-global--primary-color--dark-100);
}

.login-pf.pf-v5-theme-dark .pf-v5-c-login {
    /* Fix main background color for dark mode */
    background-color: var(--pf-v5-global--BackgroundColor--dark--100);
}

div.kc-logo-text {
    /* Use custom logo */
    background-image: url(../img/dh-logo.svg) !important;
    /* Reduce vertical logo whitespace */
    height: 80px;
}

input[type=submit] {
    /* Show pointer on submit inputs */
    cursor: pointer;
}

input[type=checkbox] {
    /* Use primary color for checkbox accent (background when checked) */
    accent-color: var(--pf-v5-global--primary-color--100);
}

:focus,
:focus-within,
:focus-visible,
input[type="text"]:focus,
input[type="text"]:focus-within,
input[type="text"]:focus-visible,
input[type="password"]:focus,
input[type="password"]:focus-within,
input[type="password"]:focus-visible {
    /* Hide the text input outline because it is rounded (for some unknown reason) */
    outline: none;
}