@font-face {
    font-family: "Lato";
    src: url("/fonts/mateina/Lato-Regular.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Lato";
    src: url("/fonts/mateina/Lato-Bold.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: "Abril Fatface";
    src: url("/fonts/mateina/AbrilFatface-Regular.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

:root {
    --mateina-yellow: #ffc400;
    --mateina-yellow-dark: #d9a600;
    --mateina-ink: #090909;
    --mateina-paper: #faf8f3;
    --mateina-muted: #6e6a62;
    --mateina-display: "Abril Display", "Abril Fatface", Georgia, serif;
    --mateina-body: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
#root {
    font-family: var(--mateina-body);
}

body {
    background-color: var(--mateina-paper);
    color: var(--mateina-ink);
}

h1,
h2,
[class*="page-title"] {
    color: var(--mateina-ink);
    font-family: var(--mateina-display);
    letter-spacing: -0.015em;
}

button,
input,
select,
textarea {
    font-family: var(--mateina-body);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(255, 196, 0, 0.5) !important;
    outline-offset: 2px;
}

::selection {
    background: var(--mateina-yellow);
    color: var(--mateina-ink);
}