:root {
    --color-light: white;
    --color-dark: black;
}

/* ===== Google Material Symbols - Local Hosting ===== */

/* Example use :
<span class="material-symbols-outlined">home</span>
*/

/* Outlined */
@font-face {
    font-family: 'Material Symbols Outlined';
    src: url('/font/material-symbols/MaterialSymbolsOutlined.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: block;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    font-variation-settings: 'wght' 300;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Rounded */
@font-face {
    font-family: 'Material Symbols Rounded';
    src: url('/font/material-symbols/MaterialSymbolsRounded.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: block;
}

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    font-variation-settings: 'wght' 300;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Sharp */
@font-face {
    font-family: 'Material Symbols Sharp';
    src: url('/font/material-symbols/MaterialSymbolsSharp.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: block;
}

.material-symbols-sharp {
    font-family: 'Material Symbols Sharp';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    font-variation-settings: 'wght' 300;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}


/* icon sizes */
span.size-sm {
    font-size: 20px;
    font-variation-settings: 'OPSZ' 20;
}

span.size-md {
    font-size: 30px;
    font-variation-settings: 'OPSZ' 30;
}

span.size-lg {
    font-size: 40px;
    font-variation-settings: 'OPSZ' 40;
}

/* icon color */
span.color-light {
    color: white;
}

/* ===== ICON FILL ===== */
/* 0 = contour, 1 = plein */
span.fill-0 {
    font-variation-settings: 'FILL' 0;
}

span.fill-1 {
    font-variation-settings: 'FILL' 1;
}

/* ===== ICON WEIGHT ===== */
/* valeurs recommandées : 100 à 700 */
span.wght-200 {
    font-variation-settings: 'wght' 200;
}

span.wght-400 {
    font-variation-settings: 'wght' 400;
}

span.wght-700 {
    font-variation-settings: 'wght' 700;
}