/* =============================================================================
   RESET
   Source: modern-normalize v3.0.1 | MIT License
   https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css
   ============================================================================= */

/**
Use a better box model (opinionated). Box sizing should not be inherited.
*/
*,
::before,
::after {
    box-sizing: border-box;
}

/**
1. Improve consistency of default fonts in all browsers.
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/
html {
    font-family:
        system-ui,
        'Segoe UI',
        Roboto,
        Helvetica,
        Arial,
        sans-serif,
        'Apple Color Emoji',
        'Segoe UI Emoji'; /* 1 */
    line-height: 1.15; /* 2 */
    -webkit-text-size-adjust: 100%; /* 3 */
    tab-size: 4; /* 4 */
}

/**
Remove the margin in all browsers.
*/
body {
    margin: 0;
}

/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
    font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers.
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        'Liberation Mono',
        Menlo,
        monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
    font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/**
Correct table border color inheritance in Chrome and Safari.
*/
table {
    border-color: currentcolor;
}

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
    padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
    vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/**
Add the correct display in Chrome and Safari.
*/
summary {
    display: list-item;
}


/* =============================================================================
   FONTS
   Source: crefotrust-self-service-frontend/src/styles/fonts/_fonts.scss
   Note: copy font files to static/fonts/ to activate @font-face declarations
   ============================================================================= */

/* open-sans-300 */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'),
        url('fonts/open-sans/open-sans-v17-latin-300.woff2') format('woff2'),
        url('fonts/open-sans/open-sans-v17-latin-300.woff') format('woff');
}

/* open-sans-300italic */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
        url('fonts/open-sans/open-sans-v17-latin-300italic.woff2') format('woff2'),
        url('fonts/open-sans/open-sans-v17-latin-300italic.woff') format('woff');
}

/* open-sans-400 */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
        url('fonts/open-sans/open-sans-v17-latin-regular.woff2') format('woff2'),
        url('fonts/open-sans/open-sans-v17-latin-regular.woff') format('woff');
}

/* open-sans-400italic */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local('Open Sans Italic'), local('OpenSans-Italic'),
        url('fonts/open-sans/open-sans-v17-latin-italic.woff2') format('woff2'),
        url('fonts/open-sans/open-sans-v17-latin-italic.woff') format('woff');
}

/* open-sans-600 */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
        url('fonts/open-sans/open-sans-v17-latin-600.woff2') format('woff2'),
        url('fonts/open-sans/open-sans-v17-latin-600.woff') format('woff');
}

/* open-sans-600italic */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
        url('fonts/open-sans/open-sans-v17-latin-600italic.woff2') format('woff2'),
        url('fonts/open-sans/open-sans-v17-latin-600italic.woff') format('woff');
}

/* open-sans-700 */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
        url('fonts/open-sans/open-sans-v17-latin-700.woff2') format('woff2'),
        url('fonts/open-sans/open-sans-v17-latin-700.woff') format('woff');
}

/* open-sans-700italic */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
        url('fonts/open-sans/open-sans-v17-latin-700italic.woff2') format('woff2'),
        url('fonts/open-sans/open-sans-v17-latin-700italic.woff') format('woff');
}

/* averta-std (bold only) */
@font-face {
    font-family: 'Averta Std';
    font-style: normal;
    font-weight: 700;
    src: local('Averta Std'),
        url('fonts/averta/averta-bold-webfont.woff2') format('woff2'),
        url('fonts/averta/averta-bold-webfont.woff') format('woff');
}


/* =============================================================================
   DESIGN TOKENS — COLORS
   Source: crefotrust-self-service-frontend/apps/self-service-frontend/
           src/styles/_colors.scss + src/components/theme-registry/CrefoTheme.js
   ============================================================================= */

:root {
    /* Primary */
    --color-primary: #009ee2;           /* c-p-1 / primary */
    --color-primary-dark: #004884;      /* c-s-3 / secondary */
    --color-secondary: #006eb7;         /* c-s-2 */
    --color-grey-c-3: #4c4c4c;

    /* Text */
    --color-text: #4c4c4c;             /* c-grau-3 — default body text */
    --color-text-muted: #7f7f7f;       /* c-grau-2 */
    --color-text-secondary: #b5b5b5;   /* c-grau — body2 / muted labels */
    --color-text-h2: #004884;          /* h2 heading color */

    /* Backgrounds */
    --color-white: #ffffff;
    --color-background-c-grey-light-50percent: #f6f5f2;
    --color-background-c-grey-light: #edece5;       /* greyscale-c-grey-light */
    --color-background-c-grey-lighter: #fbfbfa;
    --color-background-c-grey-light-opacity-20percent: rgba(237, 236, 229, 0.2);
    --color-background-c-grey-3: #b5b5b5;

    /* Borders / Dividers */
    --color-border: #b5b5b5;           /* greyscale-c-grey */
    --color-border-gray: #d9d9d9;      /* greyscale-c-grey3 / background-line-grey */
    --color-divider: #efefef;          /* grey-light */

    /* States */
    --color-error: #e85c73;            /* c-error */
    --color-error-secondary: #e05469; /* c-error-2 / tertiary-c-t2 */
    --color-success: #9ccc40;          /* c-success */
    --color-alert-warning: #f8b81f;    /* primary-warn / c-warning */
    --color-black: #000000;

    /* Additional brand tokens */
    --color-info: #5bc4f2;             /* secondary-cs1 */
    --color-teal: #8acac1;             /* tertiary-ct4 */
    --color-purple: #a763a4;           /* tertiary-ct1 */

    /* Neutral */
    --color-grey-ultralight: #fafafa;  /* grey-ultralight */


/* =============================================================================
   DESIGN TOKENS — SPACING
   Source: crefotrust-self-service-frontend/apps/self-service-frontend/
           src/styles/_spacings.scss
   ============================================================================= */

    --spacing-xs: 8px;
    --spacing-crefo-small-desktop: 10px;
    --spacing-crefo-small-mobile: 7.5px;
    --spacing-small: 15px;
    --spacing-medium: 30px;
    --spacing-crefo-medium-mobile: 15px;
    --spacing-large: 60px;
    --spacing-small-mobile: 20px;
    --max-viewport-width: 1200px;


/* =============================================================================
   DESIGN TOKENS — TYPOGRAPHY
   Source: CrefoTheme.js typography
   ============================================================================= */

    --font-family-base: 'Open Sans', Arial, Helvetica, sans-serif;
    --font-family-heading: 'Averta Std', 'Open Sans', Arial, Helvetica, sans-serif;

    --font-size-sm: 0.8rem;        /* ~13px */
    --font-size-base: 15px;        /* body default */
    --font-size-base-mobile: 14px;
    --font-size-lg: 1.2rem;

    --font-size-h1: 2.375rem;       /* 38px */
    --font-size-h1-mobile: 1.5rem;  /* 24px */
    --font-size-h2: 1.625rem;       /* 26px */
    --font-size-h2-mobile: 19px;
    --font-size-h3: 20px;
    --font-size-h3-mobile: 16px;

    --line-height-base: 26px;
    --line-height-base-mobile: 24px;
    --line-height-h1: 3.25rem;
    --line-height-h1-mobile: 2.125rem;
    --line-height-h2: 36px;
    --line-height-h2-mobile: 29px;
    --line-height-h3: 1.875rem;
    --line-height-h3-mobile: 24px;

    --letter-spacing-base: 0.5px;


/* =============================================================================
   DESIGN TOKENS — BREAKPOINTS (reference only, use in media queries below)
   Source: CrefoTheme.js breakpoints: xs:0, sm:320, md:768, lg:1140
   ============================================================================= */

    --breakpoint-sm: 320px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1140px;
}


/* =============================================================================
   BASE ELEMENT STYLES
   Source: CrefoTheme.js typography + body/root rules
   ============================================================================= */

body {
    color: var(--color-text);
    background-color: var(--color-white);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: 400;
    font-style: normal;
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-base);
}

h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-base);
    color: var(--color-primary);
}

h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-base);
    font-style: normal;
    color: var(--color-text-h2);
}

h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3);
    font-weight: 700;
    line-height: var(--line-height-h3);
    letter-spacing: var(--letter-spacing-base);
    color: var(--color-primary-dark);
}

p,
.body1 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-base);
    color: var(--color-text);
}

.body2 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-base);
    color: var(--color-text-secondary);
}


/* =============================================================================
   RESPONSIVE TYPOGRAPHY
   Source: CrefoTheme.js media overrides
   ============================================================================= */

@media (max-width: 768px) {
    body {
        font-size: var(--font-size-base-mobile);
        line-height: var(--line-height-base-mobile);
    }

    h1 {
        font-size: var(--font-size-h1-mobile);
        line-height: var(--line-height-h1-mobile);
    }

    h2 {
        font-size: var(--font-size-h2-mobile);
        font-weight: 700;
        line-height: var(--line-height-h2-mobile);
        letter-spacing: 0.095px;
    }

    h3 {
        font-size: var(--font-size-h3-mobile);
        line-height: var(--line-height-h3-mobile);
        letter-spacing: 0.278px;
    }

    p,
    .body1,
    .body2 {
        font-size: var(--font-size-base-mobile);
        line-height: var(--line-height-base-mobile);
    }
}

@media (max-width: 375px) {
    p,
    .body1 {
        font-size: var(--font-size-base-mobile);
        line-height: var(--line-height-base-mobile);
    }
}