@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');


@font-face {
    font-family: Volterra;
    src: url('../assets/typeface/Volterra.otf');
}

:root {
    --textColour: black;
    --bkgColour: white;

    --bodyFont: 'Helvetica Neue', 'DM Sans', 'Helvetica', arial, sans-serif;
    --logoFont: 'Volterra', serif;

    --line: 1px black solid;

    /* set base values */
    --text-base-size: 1em;
    --text-scale-ratio: 1.2;

    /* type scale */
    --text-xxs: calc(var(--text-base-size) / (var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio)));
    --text-xs: calc(var(--text-base-size) / (var(--text-scale-ratio) * var(--text-scale-ratio)));
    --text-sm: calc(var(--text-base-size) / var(--text-scale-ratio));
    --text-md: calc(var(--text-base-size) * var(--text-scale-ratio));
    --text-lg: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-base-size)* var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-base-size)* var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));

    --text-base-size-mobile: 13px;


    /* spacing */
    --space-xxxs: 0.25em;
    --space-xxs: 0.375em;
    --space-xs: 0.5em;
    --space-sm: 0.75em;
    --space-md: 1.25em;
    --space-lg: 2em;
    --space-xl: 3.25em;
    --space-xxl: 5.25em;
    --space-xxxl: 8.5em;

    /* line-height */
    --heading-line-height: 1.2;
    --body-line-height: 1.4;

}

.logo {
    font-family: var(--logoFont);
}

.thick {
    font-weight: 600;
}

.text-xxs {
    font-size: var(--text-xxs);
}

.text-xs,
figcaption {
    font-size: var(--text-xs);
}

.text-sm,
{
font-size: var(--text-sm);
}

body,
.text-body {
    font-size: var(--text-base-size);
}

.text-md,
h3 {
    font-size: var(--text-md);
}

.text-lg,
h2 {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-xxl {
    font-size: var(--text-xxl);
}

.text-xxxl,
h1 {
    font-size: var(--text-xxxl)
}

/* spacing */
.reset-spacing {
    padding: 0;
    margin: 0;
}

/* down */
.spacing-down-xxxs {
    padding-bottom: var(--space-xxxs)
}

.spacing-down-xxs {
    padding-bottom: var(--space-xxs)
}

.spacing-down-xs {
    padding-bottom: var(--space-xs)
}

.spacing-down-sm {
    padding-bottom: var(--space-sm)
}

.spacing-down-md {
    padding-bottom: var(--space-md)
}

.spacing-down-lg {
    padding-bottom: var(--space-lg)
}

.spacing-down-xl {
    padding-bottom: var(--space-xl)
}

.spacing-down-xxl {
    padding-bottom: var(--space-xxl)
}

.spacing-down-xxxl {
    padding-bottom: var(--space-xxxl)
}


/* up */
.spacing-up-xxxs {
    padding-top: var(--space-xxxs)
}

.spacing-up-xxs {
    padding-top: var(--space-xxs)
}

.spacing-up-xs {
    padding-top: var(--space-xs)
}

.spacing-up-sm {
    padding-top: var(--space-sm)
}

.spacing-up-md {
    padding-top: var(--space-md)
}

.spacing-up-lg {
    padding-top: var(--space-lg)
}

.spacing-up-xl {
    padding-top: var(--space-xl)
}

.spacing-up-xxl {
    padding-top: var(--space-xxl)
}

.spacing-up-xxxl {
    padding-top: var(--space-xxxl)
}