/* Shell */
:root {
    --logo: url('./assets/custom/FIEGE_LOGO_schwarz_22.svg') no-repeat;
    --logo-compact: url('./assets/custom/FIEGE_LOGO_schwarz_22.svg');
    --logo-login: url('/assets/custom/FIEGE_LOGO_weiss_22.svg');
    --logo-max-width: 60%;
    --logo-max-height: 2.5rem;

    --shell-header-background: white;
    --shell-background:url('./assets/custom/fiege-corporate-gradient.webp') top center / auto 100% no-repeat;
    --shell-header-text: #fff;
    --shell-bg-color: transparent;
    --shell-border: 1px solid rgba(255, 255, 255, 0.2);
    --shell-button-color: black;
    --shell-font-color: var(--surface-600);
    --shell-content-background: #E8E8E8;

    --offCanvas-width: 100vw;
    --header-height: 70px;

    --panelmenu-color: white;
    --panelmenu-color-hover: var(--white-darken-5);
    --panelmenu-color-active: var(--white-darken-5);
    --panelmenu-color-link-active: white;

    --login-background: center/100% auto url('./assets/custom/fiege-corporate-gradient.webp');;
    --login-card-background: white;

    --state-available: #33c26a;
    --state-charging: #33C2BE;
    --state-reserved: #8a1833;
    --state-error: #F80A37;
    --state-not-connected: #757575;

    --mega-button-color: var(--primary-color);
    --mega-button-background: var(--primary-color-text);
    --mega-button-border: 1px solid var(--border-color-dark);
    --mega-button-border-hover: 1px solid var(--border-color-darker);

    --dynamicForm-info-color: #009fe3;
    --dynamicForm-warn-color: #faad00;
    --dynamicForm-summary-color: #001017;
    --dynamicForm-text-color: #404040;
    --dynamicForm-container-background: #0000000d;
}

@media (min-width: 992px) {
    :root {
        --offCanvas-width: 320px;
    }
}

/* Typography */
:root {
    --font-family-headline: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --icon-font-family: 'EAAZE-Icons';

    --font-weight-lighter: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semi-bold: 500;
    --font-weight-bold: 600;

    --h1-font-family: var(--font-family-headline);
    --h1-font-weight: 500;
    --h1-color: inherit;
    --h1-text-transform: none;
    --h1-font-size: 30px;
    --h1-line-height: 36px;
    --h1-letter-spacing: 0;
    --h1-text-align: left;
    --h1-margin: 0 0 1rem 0;

    --h2-font-family: var(--font-family-headline);
    --h2-font-weight: normal;
    --h2-color: initial;
    --h2-text-transform: none;
    --h2-font-size: 24px;
    --h2-line-height: 30px;
    --h2-letter-spacing: 0;
    --h2-text-align: left;
    --h2-margin: 0 0 0.5rem 0;

    --h3-font-family: var(--font-family-headline);
    --h3-font-weight: 500;
    --h3-color: initial;
    --h3-text-transform: none;
    --h3-font-size: 18px;
    --h3-line-height: 30px;
    --h3-letter-spacing: 0;
    --h3-text-align: left;
    --h3-margin: 0 0 0.25rem 0;

    --h4-font-family: var(--font-family-headline);
    --h4-font-weight: 300;
    --h4-color: initial;
    --h4-text-transform: none;
    --h4-font-size: 18px;
    --h4-line-height: 30px;
    --h4-letter-spacing: 0;
    --h4-text-align: left;
    --h4-margin: 0 0 0.25rem 0;

    --h5-font-family: var(--font-family-headline);
    --h5-font-weight: 600;
    --h5-color: initial;
    --h5-text-transform: none;
    --h5-font-size: 1rem;
    --h5-line-height: auto;
    --h5-letter-spacing: 0;
    --h5-text-align: left;
    --h5-margin: 0 0 0.125rem 0;

    --h6-font-family: var(--font-family-headline);
    --h6-font-weight: 300;
    --h6-color: initial;
    --h6-text-transform: uppercase;
    --h6-font-size: 1rem;
    --h6-line-height: auto;
    --h6-letter-spacing: 1.4px;
    --h6-text-align: left;
    --h6-margin: 0 0 0.125rem 0;

    --p-font-family: var(--font-family-headline);
    --p-font-weight: normal;
    --p-color: initial;
    --p-text-transform: none;
    --p-font-size: 1rem;
    --p-line-height: auto;
    --p-letter-spacing: 0;
    --p-text-align: left;
    --p-margin: 0 0 0.5rem 0;

    --p-small-font-family: var(--font-family-headline);
    --p-small-font-weight: normal;
    --p-small-color: initial;
    --p-small-text-transform: none;
    --p-small-font-size: 12px;
    --p-small-line-height: 1rem;
    --p-small-letter-spacing: 0;
    --p-small-text-align: left;

    --a-font-family: var(--p-font-family);
    --a-font-weight: 400;
    --a-color: var(--primary-color);
    --a-text-transform: none;
    --a-text-decoration: underline;
    --a-font-size: var(--p-font-size);
    --a-line-height: var(--p-line-height);
    --a-letter-spacing: var(--p-letter-spacing);
}

@media (max-width: 576px) {
    :root {
        --h1-font-size: 24px;
        --h1-line-height: 28px;
        --h2-font-size: 20px;
        --h2-line-height: 24px;
        --h3-font-size: 16px;
        --h3-line-height: 22px;
        --h4-font-size: 16px;
        --h4-line-height: 22px;
    }
}