@use "sass:map";
@use "variables" as v;

// if you never use variable inside SASS expression, consider using
// CSS-variables instead. CSS-variables are great for dynamic theme changes and
// do not visibly affect rendering performance in majority of scenarios.
:root {
    --{{ project_shortname }}-mobile-font-size: 14px;
    --{{ project_shortname }}-desktop-font-size: 16px;

    --{{ project_shortname }}-font-main: "Noto Sans", serif;
    --{{ project_shortname }}-font-heading: "Bitter", serif;

    --{{ project_shortname }}-color-brand: #{map.get(v.$pallette, "blue")};
    --{{ project_shortname }}-color-accent: #{map.get(v.$pallette, "red")};
    --{{ project_shortname }}-color-default: #{map.get(v.$pallette, "white")};
    --{{ project_shortname }}-color-link: #{map.get(v.$pallette, "navy")};
    --{{ project_shortname }}-color-text: #{map.get(v.$pallette, "black")};
    --{{ project_shortname }}-color-outline: #{map.get(v.$pallette, "gray")};
}
