/* ========================================
   BODY
   ======================================== */

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

    color: var(--color-text);
    background-color: var(--color-background);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    max-width: 100%;
}


/* ========================================
   HEADINGS
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}


/* ========================================
   PARAGRAPHS
   ======================================== */

p {
    line-height: var(--line-height-normal);
}


/* ========================================
   LINKS
   ======================================== */

a {
    color: var(--color-primary);
    transition: color var(--transition-normal);
}

a:hover {
    color: var(--color-primary-hover);
}


/* ========================================
   IMAGES
   ======================================== */

img {
    height: auto;
}


/* ========================================
   BUTTONS
   ======================================== */

button {
    color: inherit;
}

.button--primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
    padding: 10px;
}

.button--secondary {
    background-color: var(--color-surface);
    color: var(--color-primary);
    padding: 10px;
}


/* ========================================
   FORM ELEMENTS
   ======================================== */

input,
textarea,
select {
    color: var(--color-text);
    background-color: var(--color-background);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
}


/* ========================================
   CONTAINER
   ======================================== */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}


/* ========================================
   MAIN CONTENT
   ======================================== */

main {
    width: 100%;
}


/* ========================================
   SECTIONS
   ======================================== */

section {
    width: 100%;
}


/* ========================================
   HIDDEN
   ======================================== */

.hidden {
    display: none !important;
}