@import url("style-common.css");

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/metropolis/Metropolis-Regular.ttf') format('ttf'),
        url('../fonts/metropolis/Metropolis-Regular.woff2') format('woff2'),
        url('../fonts/metropolis/Metropolis-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-main: "Metropolis", sans-serif;
    --font-headers: "Archivo Narrow", sans-serif;

    --primary-color: #d31f38;
    --primary-hover: #c51e36;

    --text-dark: #231f20;
    --text-light: #ffffff;
    --text-muted: var(--text-dark);

    --bg-dark: #2f2e39;
    --bg-section: #e0d9d9;

    --color--measurement: var(--bg-dark);

    --border-radius-sm: 0.5rem;
    --border-radius-md: 0.75rem;
}
body{
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.contact-section__title,
h2 {
    font-size: 2rem;
}
.header-subtitle,
.contact-section__title{
    font-family: var(--font-headers);
}
.header-subtitle {
    font-size: 1.4rem;
}
.section-gradient{
    background: var(--bg-section);
}