:root {
    --hpi-red: #b1063a;
    --hpi-orange: #dd6108;
    --hpi-yellow: #f6a800;
    --hpi-yellow-lighter: #f6c800;
    --hpi-grey: #5a6065;
    --hpi-blue: #007a9e;
    /* TODO: This color is color picked from the design manual but might be wrong. */
    --hpi-blue-75: #009dc2;
    /* Grey which meets WCAG AAA contrast on white background */
    --contrast-grey: #4d5053;
    /* Darkened HPI orange which meets WCAG AAA contrast on white background */
    --hpi-orange-contrast: #934005;
    /* Darkened HPI red. Not an official design color */
    --hpi-red-darker: #96052f;
    --pf-v5-global--FontFamily--text: "Neo Sans W02", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pf-v5-global--FontFamily--heading: "Neo Sans W02 Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pf-v5-global--FontFamily--text--vf: "Neo Sans W02", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pf-v5-global--FontFamily--heading--vf: "Neo Sans W02 Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html:not(.pf-v5-theme-dark) {
    /* See https://www.patternfly.org/developer-resources/global-css-variables/#about-css-variables */
    --pf-v5-global--primary-color--100: var(--hpi-red);
    --pf-v5-global--primary-color--200: var(--hpi-red-darker);
    --pf-v5-global--primary-color--dark: var(--hpi-red);
    --pf-v5-global--primary-color--dark-100: var(--hpi-red);
    --pf-v5-global--active-color--100: var(--hpi-red);
    --pf-v5-global--BackgroundColor--dark-100: var(--hpi-red);
    --pf-v5-global--link--Color: var(--hpi-red);
    --pf-v5-global--link--Color--hover: var(--hpi-red-darker);
    --pf-v5-global--link--Color--light: var(--hpi-red);
    --pf-v5-global--link--Color--light--hover: var(--hpi-red-darker);
    --pf-v5-global--link--Color--dark: var(--hpi-red);
    --pf-v5-global--link--Color--dark--hover: var(--hpi-red-darker);
    --pf-v5-global--link--Color--visited: var(--hpi-red);
    --pf-v5-global--danger-color--100: var(--hpi-red);
    --pf-v5-global--danger-color--200: var(--hpi-red);
    --pf-v5-global--info-color--100: var(--hpi-blue);
    --pf-v5-global--info-color--200: var(--hpi-blue-75);
}

html.pf-v5-theme-dark {
    --pf-v5-global--primary-color--100: var(--hpi-yellow);
    --pf-v5-global--primary-color--200: var(--hpi-yellow-lighter);
    --pf-v5-global--primary-color--dark: var(--hpi-orange);
    --pf-v5-global--primary-color--dark-100: var(--hpi-yellow);
    --pf-v5-global--active-color--100: var(--hpi-yellow);
    --pf-v5-global--BackgroundColor--dark-100: var(--hpi-red);
    --pf-v5-global--link--Color: var(--hpi-yellow);
    --pf-v5-global--link--Color--hover: var(--hpi-yellow-lighter);
    --pf-v5-global--link--Color--light: var(--hpi-yellow);
    --pf-v5-global--link--Color--light--hover: var(--hpi-yellow-lighter);
    --pf-v5-global--link--Color--dark: var(--hpi-yellow);
    --pf-v5-global--link--Color--dark--hover: var(--hpi-yellow-lighter);
    --pf-v5-global--link--Color--visited: var(--hpi-yellow);
    --pf-v5-global--danger-color--100: var(--hpi-yellow);
    --pf-v5-global--danger-color--200: var(--hpi-yellow);
    --pf-v5-global--info-color--100: var(--hpi-blue);
    --pf-v5-global--info-color--200: var(--hpi-blue-75);

    /* Broken automatic computation with Keycloak 26 */
    .pf-v5-c-button.pf-m-primary, .pf-v5-c-button.pf-m-danger {
        background-color: var(--hpi-yellow);
        color: #000000;
        font-weight: bold;
    }

    .pf-v5-c-button.pf-m-danger:hover {
        background-color: var(--hpi-yellow-lighter);
    }
}

.display-in-darkmode {
    display: none;
}

html.pf-v5-theme-dark .display-in-darkmode {
    display: block;
}

html.pf-v5-theme-dark .hide-in-darkmode {
    display: none;
}

@font-face {
    font-family: "Neo Sans W02";
    src: url('../fonts/neo-sans-w02.woff');
}

@font-face {
    font-family: "Neo Sans W02 Medium";
    src: url('../fonts/neo-sans-w02-medium.woff');
}

/* Avoid iPhones zooming in on input fields */
input:not([type="submit"]),
textarea {
    font-size: 16px !important;
}