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

    --color-primary-hue: 235;
    --color-primary-saturation: 100%;
    --color-primary-brightness: 50%;

    --color-accent-hue: 30;
    --color-accent-saturation: 90%;
    --color-accent-brightness: 55%;

    --color-warning-hue: 330;
    --color-warning-saturation: 100%;
    --color-warning-brightness: 45%;

    --color-error-hue: 330;
    --color-error-saturation: 91%;
    --color-error-brightness: 61%;

    --transition-animation-ms: 100ms;

    --color-background: #fff;
    --color-background-dark: hsl(var(--color-base-hue) 100% 8.24%);

    --color-base-darker: var(--color-background-dark);
    --color-base-dark: hsl(var(--color-base-hue), var(--color-base-saturation), 20%);
    --color-base-light: hsl(var(--color-base-hue), var(--color-base-saturation), 94%);
    --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), 70%);
    --color-base-faintest: hsl(var(--color-base-hue), calc(var(--color-base-saturation) * .8), 83%);
    --color-base-faintest-2: hsl(var(--color-base-hue), var(--color-base-saturation), 92%);
    --color-base-faintest-3: hsl(var(--color-base-hue), var(--color-base-saturation), 96%);

    --color-primary: hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-brightness));
    --color-primary-lighter: hsl(var(--color-primary-hue), var(--color-primary-saturation), calc(var(--color-primary-brightness) * 1.1));

    --color-accent: hsl(var(--color-accent-hue), var(--color-accent-saturation), var(--color-accent-brightness));
    --color-accent-darker: hsl(var(--color-accent-hue), var(--color-accent-saturation), calc(var(--color-accent-brightness) * .9));

    --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));

    --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-family-forms: monospace;

    --font-weight: 400;
    --font-weight-forms: 500;

    --font-size-smallest: 8.5pt;
    --font-size-smaller: 9.5pt;
    --font-size-small: 10.5pt;
    --font-size: 11pt;
    --font-size-big: 13pt;
    --font-size-huge: 20pt;

    --font-size-forms: 9pt;

    --font-line-height: 1.45em;
    --font-line-height-short: 1.3em;

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

    --vertical-multiplier: .8;

    --border-radius-bezel-outer: 20px;
    --border-radius-bezel-inner: 14px;
    --bezel-frosting-blur: 2px;
    --bezel-transparency-ondark: .25;
    --bezel-transparency-onlight: .04;
    --bezel-border-transparency-ondark: 0;
    --bezel-border-transparency-onlight: 0;
    --bezel-width: 20px;
    --bezel-width-small-screen: 10px;

    --content-width: 1000px;
    --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) * 6);
    --gap-huge: calc(var(--base-gap) * 8);

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

    --button-height-small: 22px;
    --button-font-weight-small: 400;
    --button-font-size-small: 9.5pt;
    --button-icon-size-small: 13px;

    --faint-opacity: 0.5;

    --icon-size-smaller: 13px;
    --icon-size-small: 15px;
    --icon-size: 17px;
    --icon-size-big: 24px;
    --icon-size-bigger: 40px;
    --icon-size-biggest: 60px;
    --icon-size-huge: 90px;

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

    --banner-border-radius: 20px;

    --menu-height: 50px;

    /* products */
    --color-product-recommendations: #fc3d40;
    --color-product-recommendations-2: #ff9a68;
    --color-product-recommendations-fg: #ffffff;
    --color-product-recommendations-line-color: #ffffff;

    --color-natural-search: #2075eb;
    --color-natural-search-2: #00c3e6;
    --color-natural-search-fg: #ffffff;
    --color-natural-search-line-color: #ffffff;

    --color-trend-analysis: #0099db;
    --color-trend-analysis-2: #00ebc7;
    --color-trend-analysis-fg: #ffffff;
    --color-trend-analysis-line-color: #ffffff;

    --color-client-tags: #00b786;
    --color-client-tags-2: #91e879;
    --color-client-tags-fg: #ffffff;
    --color-client-tags-line-color: #ffffff;

    --gradient-product-recommendations: linear-gradient(45deg, var(--color-product-recommendations), var(--color-product-recommendations-2));
    --gradient-natural-search: linear-gradient(45deg, var(--color-natural-search), var(--color-natural-search-2));
    --gradient-trend-analysis: linear-gradient(45deg, var(--color-trend-analysis), var(--color-trend-analysis-2));
    --gradient-client-tags: linear-gradient(45deg, var(--color-client-tags), var(--color-client-tags-2));

    /* dashboard */
    --dashboard-panels-border-radius: 20px;
    --dashboard-panels-border-radius-inner: 12px;
}