Widget CSS overwrite global variables

[DBMdebussac]

Hello,
On the current version, the CSS injected by the widget overwrite :root variables :

:root {
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semi-bold: 600;
    --weight-bold: 700;
    --alma-orange: #fa5022;
    --soft-orange: #ffeadb;
    --alma-blue: #60d2df;
    --soft-blue: #e7f8fa;
    --alma-yellow: #ffcf00;
    --soft-yellow: #fff5cc;
    --alma-green: #4bb543;
    --soft-green: #e2f3e1;
    --alma-red: #cf2020;
    --soft-red: #ffecec;
    --off-white: #f9f9f9;
    --light-gray: #dcdcdc;
    --dark-gray: #4a4a4a;
    --off-black: #1a1a1a;
    --white: #fff;
    --black: #000;
    --font-tiny: 10px;
    --font-x-small: 12px;
    --font-small: 14px;
    --font-base: 16px;
    --font-medium: 20px;
    --font-large: 24px;
    --font-x-large: 32px
}

This can cause conflict in sites that also use these global variable for the theme (in our case, for exemple but not only, --font-base is a font-family).
Alma's styles should be scoped to Alma's components or use a prefix to make sure the CSS only affect the widget and avoid conflict with other CSS.

Thanks