/* ==========================================================
   Body
========================================================== */

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);

    background-color: var(--color-background-page-light);
    color: var(--color-text-primary-light);
}


/* ==========================================================
   Headings
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    color: inherit;
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-h1);
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-h2);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h3);
    letter-spacing: var(--letter-spacing-h3);
}

h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h4);
}

h5 {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h5);
}

h6 {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h6);
}


/* ==========================================================
   Paragraphs
========================================================== */

p {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: inherit;
}


/* ==========================================================
   Links
========================================================== */

a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================
   Lists
========================================================== */

ul,
ol {
    list-style: none;
}

li {
    font-size: inherit;
}


/* ==========================================================
   Strong
========================================================== */

strong,
b {
    font-weight: var(--font-weight-bold);
}


/* ==========================================================
   Code
========================================================== */

code,
pre {
    font-family: monospace;
}


/* ==========================================================
   Small Text
========================================================== */

small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}


/* ==========================================================
   Selection
========================================================== */

::selection {
    background-color: var(--color-primary);
    color: var(--color-background-surface-light);
}