/* Färger och gemensamma mått */
:root {
    --color-background: #b6bfc1;
    --color-primary: #253122;
    --color-accent: #f15a30;
    --color-text: var(--color-primary);
    --color-border: #fbe6a0;
    --page-padding: clamp(1rem, 2vw, 2rem);
    --sidebar-width: 26%;
}

/* Låt padding och ramar ingå i elementens storlek */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Sidans typsnitt och grundfärger */
html {
    font-family: "Google Sans Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: 
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "ROND" 0;
    background: var(--color-background);
    color: var(--color-text);

}

/* Ta bort webbläsarens standardmarginal */
body {
    margin: 0;
}

/* Låt formulärfält och knappar ärva typsnittet */
button,
input,
textarea,
select {
    font: inherit;
}

/* Länkarnas färg och understrykning */
a {
    color: inherit;
    text-underline-offset: 0.2em;
}

/* Markering när muspekaren ligger över en länk */
a:hover {
    text-decoration-thickness: 2px;
}

/* Fokusmarkering vid tangentbordsnavigation */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 5px;
}

/* Färger för markerad text */
::selection {
    background: var(--color-accent);
    color: var(--color-text);
}