/* =========================================
   VARIÁVEIS & RESET
   ========================================= */

:root {
    --color-text: #111;
    --color-dark-grey: #333;
    --color-bg: #fffff2;
    --color-bg-dark: #e5e5da;
    --color-bg-transp: rgba(242, 242, 231, 0.6);
    --color-primary: #E36A6A;
    --color-primary-dark: #c25252;
    --color-secondary: #c5c9bc;
    --color-secondary-dark: #9ca587;
    --color-border: #FFB2B2;
    --color-box-border: #e2e8f0;
    --color-muted: #666;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --spacing-unit: 1rem;
    --max-width: 1100px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    line-height: 1.5;
    scroll-behavior: smooth;
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--color-text);
    background: var(--color-bg);
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color 300ms ease-in-out 0s;
}

a[href]:hover,
a[href]:focus {
    color: var(--color-primary);
}

h1,
h2,
h3,
h4 {
    font-weight: 700;
    margin-bottom: 0.5em;
    color: var(--color-dark-grey);
}

hr {
    margin: 2rem auto;
}