@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
    font-family: 'Benton Sans';
    src: url('assets/fonts/BentonSans-Book.woff2') format('woff2'),
        url('assets/fonts/BentonSans-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans';
    src: url('assets/fonts/BentonSans-BookItalic.woff2') format('woff2'),
        url('assets/fonts/BentonSans-BookItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans';
    src: url('assets/fonts/BentonSans-Bold.woff2') format('woff2'),
        url('assets/fonts/BentonSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans Condensed';
    src: url('assets/fonts/BentonSansCondensed-Medium.woff2') format('woff2'),
        url('assets/fonts/BentonSansCondensed-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans Condensed';
    src: url('BentonSansCondensed-Bold.woff2') format('woff2'),
        url('BentonSansCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans';
    src: url('assets/fonts/BentonSans-Light.woff2') format('woff2'),
        url('assets/fonts/BentonSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans';
    src: url('assets/fonts/BentonSans-Medium.woff2') format('woff2'),
        url('assets/fonts/BentonSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans';
    src: url('assets/fonts/BentonSans-Italic.woff2') format('woff2'),
        url('assets/fonts/BentonSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans';
    src: url('assets/fonts/BentonSans-LightItalic.woff2') format('woff2'),
        url('assets/fonts/BentonSans-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans';
    src: url('assets/fonts/BentonSans-MediumItalic.woff2') format('woff2'),
        url('assets/fonts/BentonSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}


:root {
    --navy-blue: #082043;
    --grey-body: #363537
    --green: #7CB52E

}
html {
    font-size: 17px;
}
h1, .h1 {
    font-family: 'Benton Sans Condensed';
    color: #FFFFFF;
    font-size: 2.706rem; /* 46 px */
    font-weight: 700;
    line-height: 1.25; /* 57.5px */

}
h2, .h2 {
    font-family: 'Benton Sans Condensed';
    color: var(--navy-blue);
    font-size: 1.882rem; /* 32 px */
    font-weight: 700;
    line-height: 1.25; /* 40px */
}
h3, .h3 {
    font-family: 'Benton Sans Condensed';
    color: var(--navy-blue);
    font-size: 1.412rem; /* 24 px */
    font-weight: 700;
    line-height: 1.25; /* 30px */
}
h4, .h4 {
    font-family: 'Inter';
    font-size: 1.059rem; /* 18px */
    font-weight: 500;
    line-height: 1.25; /* 22.5px */
}
.caption {
    font-family: 'Inter';
    color: #000000; /* black */
    font-size: 0.706rem; /* 12px */
    font-weight: 400;
    line-height: 1.25; /* 15px */
}
.eyebrow {
    font-family: 'Benton Sans';
    font-size: 1.176rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--green);
}
.chart-title {
    font-family: 'Benton Sans Condensed';
    font-size: 1.176rem; /* 20px */
    font-weight: 500;
    line-height: 1.25; /* 25px */
    color: #FFFFFF; 
}
.chart-label {
    font-family: 'Benton Sans';
    font-size: 0.824rem; /* 14px */
    line-height: 1.25; /* 17.5px */
    font-weight: 700;
    color: #FFFFFF; 
}
.chart-body {
    font-family: 'Benton Sans';
    font-size: 0.824rem; /* 14px */
    line-height: 1.25; /* 17.5px */
    font-weight: 700;
    color: #000000; 
}
.callout {
    font-family: 'Benton Sans';
    font-size: 0.941rem; /* 16px */
    line-height: 1.25; /* 20px */
    font-weight: 700;
    color: var(--navy-blue); 
}
.footnote {
    font-family: 'Benton Sans';
    font-size: 0.706rem;
    line-height: 1.25;
    font-weight: 400;
    color: #000000;
}
body {
    font-family: 'Benton Sans';
    color: var(--grey-body);
    font-size: 1rem; /* 17 px */
    font-weight: 400;
    line-height: 1.35; /* 22.95px */
}