/* ==========================
   Design Tokens
========================== */

:root {
    /* Spacing Scale (8px system - like minecraft or computers) */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    /* Future additions for the site:
       --color-primary:
       --font-scale:
       --radius-md:
    */
}


/* ==========================
   Font Faces :D
========================== */

@font-face {
    font-family: "RalewayLocal";
    src: url("../fonts/Raleway-Thin.ttf") format("truetype");
    font-weight: 100;
}

@font-face {
    font-family: "RalewayLocal";
    src: url("../fonts/Raleway-ExtraLight.ttf") format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: "RalewayLocal";
    src: url("../fonts/Raleway-Light.ttf") format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "RalewayLocal";
    src: url("../fonts/Raleway-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "RalewayLocal";
    src: url("../fonts/Raleway-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "RalewayLocal";
    src: url("../fonts/Raleway-SemiBold.ttf") format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: "RalewayLocal";
    src: url("../fonts/Raleway-Bold.ttf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "RalewayLocal";
    src: url("../fonts/Raleway-ExtraBold.ttf") format("truetype");
    font-weight: 800;
}

@font-face {
    font-family: "RalewayLocal";
    src: url("../fonts/Raleway-Black.ttf") format("truetype");
    font-weight: 900;
}


/* ==========================
   Base Typography (No acid)
========================== */

body {
    font-family: "RalewayLocal", sans-serif;
    font-weight: 400;
    background-color: #F0EEE9;
    line-height: 1.6;
}

h1,
h2 {
    text-transform: uppercase;
    margin: var(--space-sm) 0;
}

h1 {
    font-weight: 900;
    letter-spacing: 8px;
}

h2 {
    font-weight: 600;
    letter-spacing: 4px;
}

p {
    margin-bottom: var(--space-sm);
}

img {
    max-width: 100%;
    display: block;
}