:root {
    --color-base-hue: 225;
    --color-base-saturation: 70%;
    --color-base-brightness: 25%;

    --color-primary-hue: 225;
    --color-primary-saturation: 100%;
    --color-primary-brightness: 57%;

    --color-accent-hue: 70;
    --color-accent-saturation: 90%;
    --color-accent-brightness: 45%;

    --color-warning-hue: 38;
    --color-warning-saturation: 100%;
    --color-warning-brightness: 50%;

    --color-error-hue: 330;
    --color-error-saturation: 100%;
    --color-error-brightness: 40%;

    --transition-animation-ms: 100ms;

    --color-base-darker: hsl(var(--color-base-hue), 50%, 15%);
    --color-base-dark: hsl(var(--color-base-hue), 40%, 20%);
    --color-base: hsl(var(--color-base-hue), var(--color-base-saturation), var(--color-base-brightness));
    --color-base-faint: hsl(var(--color-base-hue), 30%, 50%);
    --color-base-fainter: hsl(var(--color-base-hue), calc(var(--color-base-saturation) * .8), 83%);
    --color-base-faintest: hsl(var(--color-base-hue), var(--color-base-saturation), 92%);
    --color-base-faintest-2: hsl(var(--color-base-hue), var(--color-base-saturation), 98%);

    --color-primary: hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-brightness));

    --color-accent: hsl(var(--color-accent-hue), var(--color-accent-saturation), var(--color-accent-brightness));

    --color-warning: hsl(var(--color-warning-hue), var(--color-warning-saturation), var(--color-warning-brightness));

    --color-error: hsl(var(--color-error-hue), var(--color-error-saturation), var(--color-error-brightness));

    --bgColor: #fff;

    --font-family-main: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
    /* --font-family-title: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif; */
    /* --font-family-main: 'Barlow'; */
    --font-family-title: 'D-DIN Exp';
    /* --font-family-title: 'Radio Canada'; */

    --font-size: 11pt;
    --font-size-small: 9.5pt;
    --font-size-big: 13pt;
    --font-line-height: 1.5em;
    --font-line-height-short: 1.3em;

    --border-radius: 10px;
    --border-radius-inner: 8.5px;
    --border-radius-small: 5px;

    --content-width: 1100px;
    --content-width-narrow: 700px;
    --content-width-narrower: 500px;

    --base-gap: 10px;
    --gap-big: calc(var(--base-gap) * 2);
    --gap-bigger: calc(var(--base-gap) * 4);
    --gap-biggest: calc(var(--base-gap) * 8);
    --gap-huge: calc(var(--base-gap) * 12);

    --button-height: 30px;
    --button-font-weight: 500;
    --button-font-family: var(--font-family-main);
    --button-font-size: 14px;
    --button-border-radius: 8px;

    --faintOpacity: 0.5;

    --icon-size: 17px;
    --icon-size-big: 24px;
    --icon-size-bigger: 40px;
    --icon-size-biggest: 60px;

    --panelBorderColor: hsla(var(--color-primary-hue), var(--color-primary-saturation), 94%);

    /* products */
    --gradientPersonalizedRecommend: linear-gradient(45deg, #f9ab83, #ff5e62);;
    --gradientNaturalSearch: linear-gradient(45deg, #00d9ff, #4b8ae1);
    --gradientTrendAnalysis: linear-gradient(45deg, #00e9c6, #69caf4);
    --gradientProfileTags: linear-gradient(45deg, #85fb63, #00d79e);
}