@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter/Inter-Variable.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter/Inter-Italic-Variable.woff2") format("woff2");
}

@font-face {
	font-family: "Material Symbols Outlined";
	font-style: normal;
	font-weight: 200;
	font-display: block;
	src: url("../fonts/material-icons/MaterialSymbolsOutlined-200.woff2") format("woff2");
}

body {
	background: var(--cs-color-bg-page);
	color: var(--cs-color-base-grey-900);
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-body);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--cs-color-base-grey-800);
	font-family: var(--cs-font-family);
	font-weight: var(--cs-font-weight-regular);
	letter-spacing: normal;
}

h1 { font-size: var(--cs-font-size-header-h1); line-height: var(--cs-font-line-header-h1); }
h2 { font-size: var(--cs-font-size-header-h2); line-height: var(--cs-font-line-header-h2); }
h3 { font-size: var(--cs-font-size-header-h3); line-height: var(--cs-font-line-header-h3); }
h4 { font-size: var(--cs-font-size-header-h4); line-height: var(--cs-font-line-header-h4); }
h5 { font-size: var(--cs-font-size-header-h5); line-height: var(--cs-font-line-header-h5); }
h6 { font-size: var(--cs-font-size-header-h6); line-height: var(--cs-font-line-header-h6); }

a {
	color: var(--cs-color-institucional-primary);
	transition: color var(--cs-transition-default);
}

a:hover,
a:focus {
	color: var(--cs-color-institucional-primary-hover);
}

/* Estilos de texto (.cs-text-style) — headers: cor grey-800; text: grey-900 */
.cs-text-header-h1,
.cs-text-header-h2,
.cs-text-header-h3,
.cs-text-header-h4,
.cs-text-header-h5,
.cs-text-header-h6 {
	color: var(--cs-color-base-grey-800);
	font-family: var(--cs-font-family);
	font-weight: var(--cs-font-weight-regular);
	letter-spacing: normal;
}

.cs-text-header-h1 { font-size: var(--cs-font-size-header-h1); line-height: var(--cs-font-line-header-h1); }
.cs-text-header-h2 { font-size: var(--cs-font-size-header-h2); line-height: var(--cs-font-line-header-h2); }
.cs-text-header-h3 { font-size: var(--cs-font-size-header-h3); line-height: var(--cs-font-line-header-h3); }
.cs-text-header-h4 { font-size: var(--cs-font-size-header-h4); line-height: var(--cs-font-line-header-h4); }
.cs-text-header-h5 { font-size: var(--cs-font-size-header-h5); line-height: var(--cs-font-line-header-h5); }
.cs-text-header-h6 { font-size: var(--cs-font-size-header-h6); line-height: var(--cs-font-line-header-h6); }

.cs-text-title,
.cs-text-title-bold,
.cs-text-body,
.cs-text-body-small,
.cs-text-label,
.cs-text-label-small,
.cs-text-tag {
	color: var(--cs-color-base-grey-900);
	font-family: var(--cs-font-family);
}

.cs-text-title {
	font-size: var(--cs-font-size-text-title);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-title);
	letter-spacing: var(--cs-font-letter-text-title);
}

.cs-text-title-bold {
	font-size: var(--cs-font-size-text-title);
	font-weight: var(--cs-font-weight-semibold);
	line-height: var(--cs-font-line-text-title);
	letter-spacing: var(--cs-font-letter-text-title-bold);
}

.cs-text-body {
	font-size: var(--cs-font-size-text-body);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
}

.cs-text-body-small {
	font-size: var(--cs-font-size-text-body-small);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body-small);
	letter-spacing: var(--cs-font-letter-text-body-small);
}

.cs-text-label {
	font-size: var(--cs-font-size-text-label);
	font-weight: var(--cs-font-weight-semibold);
	line-height: var(--cs-font-line-text-label);
	letter-spacing: var(--cs-font-letter-text-label);
}

.cs-text-label-small {
	font-size: var(--cs-font-size-text-label-small);
	font-weight: var(--cs-font-weight-semibold);
	line-height: var(--cs-font-line-text-label-small);
	letter-spacing: var(--cs-font-letter-text-label-small);
}

.cs-text-tag {
	font-size: var(--cs-font-size-text-tag);
	font-weight: var(--cs-font-weight-medium);
	line-height: var(--cs-font-line-text-tag);
	letter-spacing: var(--cs-font-letter-text-tag);
}

/* Material Symbols: o texto do elemento é o nome do ícone (ligatura). */
.cs-icon {
	display: inline-block;
	color: var(--cs-color-institucional-primary);
	font-family: var(--cs-font-family-icon);
	font-size: inherit;
	font-style: normal;
	font-weight: 200;
	line-height: 1;
	vertical-align: middle;
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
}

.cs-icon--filled {
	font-variation-settings: "FILL" 1;
}