@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("./component/asset/fonts/Atkinson_Hyperlegible_Next/AtkinsonHyperlegibleNext-VariableFont_wght.ttf")
        format("truetype");
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("./component/asset/fonts/Atkinson_Hyperlegible_Next/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf")
        format("truetype");
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src: url("./component/asset/fonts/Atkinson_Hyperlegible_Mono/AtkinsonHyperlegibleMono-VariableFont_wght.ttf")
        format("truetype");
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src: url("./component/asset/fonts/Atkinson_Hyperlegible_Mono/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf")
        format("truetype");
    font-weight: 100 900;
    font-style: italic;
}

:root {
    font-family: "Atkinson Hyperlegible Next", sans-serif;
    line-height: 1.5;
    font-weight: 400;
    box-sizing: border-box;

    color-scheme: light dark;

    color: #281f3f;
    background-color: #f2f1f4;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --gaius-light-grey: #f2f1f4;
    --gaius-light-grey-2: #afa9bc;
    --gaius-dark-grey: #281f3f;
    --gaius-light-green: #dfe7df;
    --gaius-mid-green: #6e916e;
    --gaius-dark-green: #2a431e;
    --gaius-dark-blue: #1e1e43;
    --gaius-light-blue: #d8d8ee;
    --gaius-dark-red: #7e1b1b;
    --gaius-light-red: #f6d5d5;
    --gaius-yellow: #eeead8;
    --gaius-link-blue-1: #273f53;
    --gaius-link-blue-2: #375d76;
    --gaius-creme: #c2983d;
    --button-transition: 0.3s;
}