:root {
    color-scheme: light dark;

    /* BORDER */
    --border-radius: 0;
    --border-width: 1px;
    --outline-width: 2px;


    /* WRAPPER / GRID */
    --wrapper-size: 100rem;
    --wrapper-size-small: 60rem;
    --wrapper-size-mobile: 90%;
    --items-margin: clamp(.5rem, .125rem + 1.875vw, 2rem);
    --items-gap: calc(var(--items-margin) * 3) var(--items-margin);
    --items-min-size: 20rem;


    /* HEADER / LOGO */ 
    --logo-ratio: 59 / 15;
    --logo-height: clamp(1.5rem, 1.375rem + .625vw, 2rem);
    --padding-header: clamp(1rem, .75rem + 1.25vw, 2rem);


    /* PRIMITIVE COLORS */
    --dark-color: #1c2442;
    --light-color: #FFFFFF;

    --primary-color: light-dark(#000, #000);
    --primary-hover-color: light-dark(hsl(from var(--primary-color) h calc(s + 5) calc(l - 20)), hsl(from var(--primary-color) h s calc(l + 20)));
    --primary-active-color: light-dark(hsl(from var(--primary-color) h calc(s + 5) calc(l - 35)), hsl(from var(--primary-color) h s calc(l + 30)));

    --secondary-color: light-dark(#000, #000);
    --secondary-hover-color: light-dark(hsl(from var(--secondary-color) h calc(s + 5) calc(l - 20)), hsl(from var(--secondary-color) h s calc(l + 20)));
    --secondary-active-color: light-dark(hsl(from var(--secondary-color) h calc(s + 5) calc(l - 35)), hsl(from var(--secondary-color) h s calc(l + 30)));


    /* ALERTS */
    --alert-danger-color: light-dark(#DF2935, #eb7a81);
    --alert-danger-bg: hsl(from var(--alert-danger-color) h s l / .1);
    --alert-danger-border: hsl(from var(--alert-danger-color) h s l / .15);
    --alert-danger-outline: hsl(from var(--alert-danger-color) h s l / .3);

    --alert-warning-color: light-dark(#E8814A, #eda178);
    --alert-warning-bg: hsl(from var(--alert-warning-color) h s l / .1);
    --alert-warning-border: hsl(from var(--alert-warning-color) h s l / .15);
    --alert-warning-outline: hsl(from var(--alert-warning-color) h s l / .3);

    --alert-success-color: light-dark(#4FB477, #6be19a);
    --alert-success-bg: hsl(from var(--alert-success-color) h s l / .1);
    --alert-success-border: hsl(from var(--alert-success-color) h s l / .15);
    --alert-success-outline: hsl(from var(--alert-success-color) h s l / .3);

    --alert-info-color: light-dark(#3b82f6, #9ec1fa);
    --alert-info-bg: hsl(from var(--alert-info-color) h s l / .1);
    --alert-info-border: hsl(from var(--alert-info-color) h s l / .15);
    --alert-info-outline: hsl(from var(--alert-info-color) h s l / .3);


    /* ELEMENT COLORS */
    --background-color: light-dark(var(--light-color), var(--dark-color));
    --background-grey: color-mix(in hsl, var(--background-color), var(--title-color) 5%);
    --background-dark: light-dark(var(--dark-color), var(--light-color));

    --border-color: var(--muted-color);
    --border-hover-color: var(--text-color);
    --border-focus-color: var(--primary-color);

    --title-color: light-dark(var(--dark-color), var(--light-color));
    --strong-color: hsl(from var(--title-color) h s l / .85);
    --text-color: hsl(from var(--title-color) h s l / .75);
    --muted-color: hsl(from var(--title-color) h s l / .6);
    --outline-color: hsl(from var(--title-color) h s l / .3);
    --shadow-color: hsl(from var(--title-color) h s l / .15);


    /* FONTS */
    --font-title: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-text: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-icon: normal 400 var(--text-size-normal)/1 "inodia-icons";
    --letter-spacing: 0;


    /* FONT SIZES */
    --h1-font-size: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
    --h2-font-size: clamp(2rem, 1.625rem + 1.875vw, 3.5rem);
    --h3-font-size: clamp(1.5rem, 1.375rem + .625vw, 2rem);
    --h4-font-size: clamp(1.25rem, 1.1875rem + .3125vw, 1.5rem);
    --text-size-big: clamp(1rem, .95rem + .25vw, 1.25rem);
    --text-size-normal: 1rem;
    --text-size-small: .75rem;


    /* FONT WEIGHT */
    --text-weight-normal: 300;
    --text-weight-medium: 500;
    --text-weight-bold: 700;


    /* MARGES */
    --spacing-4xs: .25rem;
    --spacing-3xs: .5rem;
    --spacing-2xs: .75rem;
    --spacing-xs: 1rem;
    --spacing-sm: clamp(1rem, .875rem + .625vw, 1.5rem);
    --spacing-md: clamp(1.5rem, 1.375rem + .625vw, 2rem);
    --spacing-lg: clamp(2rem, 1.75rem + 1.25vw, 3rem);
    --spacing-xl: clamp(2.5rem, 2.125rem + 1.875vw, 4rem);
    --spacing-2xl: clamp(3rem, 2.25rem + 3.75vw, 6rem);
    --spacing-3xl: clamp( 4rem, 3rem + 5vw, 8rem);
    --spacing-4xl: clamp(5rem, 3.75rem + 6.25vw, 10rem);
    --columns-gap: 9%;


    /* SHADOWS */
    --box-shadow: 0 16px 24px -16px var(--shadow-color);


    /* TRANSITIONS */
    --transition-default: all .3s ease-in-out, outline .1s ease-in-out;


    /* VECTORS */

}

@media (prefers-contrast: more) {

    :root {

        /* ALERTS */
        --alert-danger-bg: transparent;
        --alert-danger-border: var(--alert-danger-color);
        --alert-danger-outline: var(--alert-danger-color);

        --alert-warning-bg: transparent;
        --alert-warning-border: var(--alert-warning-color);
        --alert-warning-outline: var(--alert-warning-color);

        --alert-success-bg: transparent;
        --alert-success-border: var(--alert-success-color);
        --alert-success-outline: var(--alert-success-color);

        --alert-info-bg: transparent;
        --alert-info-border: var(--alert-info-color);
        --alert-info-outline: var(--alert-info-color);


        /* ELEMENT COLORS */
        --border-color: light-dark(var(--dark-color), var(--light-color));
        --border-hover-color: light-dark(var(--dark-color), var(--light-color));
        --text-color: light-dark(var(--dark-color), var(--light-color));
        --strong-color: light-dark(var(--dark-color), var(--light-color));
        --placeholder-color: light-dark(var(--dark-color), var(--light-color));
        --muted-color: light-dark(var(--dark-color), var(--light-color));
        --muted-invert: light-dark(var(--light-color), var(--dark-color));
        --outline-color: light-dark(var(--dark-color), var(--light-color));
    }
}



/* ICONS SET */
.moovegdpr-arrow-close:before {
    content: "x";
    font-family: Arial;
}