/* Global styles */
@import './directus/theme.css';

/* Native elements */
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html,
body {
	width: 100%;
	height: 100dvh;
}

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

body {
	overflow: auto;
}

main {
	width: 100%;
}

div {
	display: flex;
	justify-content: center;
	align-items: center;
}

input {
	outline: none;
}

button {
	cursor: pointer;
	outline: none;
	border: none;
	background: transparent;
}

/* Containers */

.row {
	display: flex;
}

.col {
	display: flex;
	flex-direction: column;
}

.gap4 {
	gap: 4px;
}

.gap8 {
	gap: 8px;
}

.gap12 {
	gap: 12px;
}

.gap16 {
	gap: 16px;
}

form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
}

/* Colors */

.secondary-bg {
	background-color: var(--secondary-color, #171944);
}

.primary {
	background-color: var(--primary-color);
	color: var(--on-primary-color);

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	ul,
	li,
	p {
		color: var(--on-primary-color);
	}
}
.secondary {
	background-color: var(--secondary-color);
	color: var(--on-secondary-color);
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	ul,
	li,
	p {
		color: var(--on-secondary-color);
	}
}
.tertiary {
	background-color: var(--tertiary-color);
	color: var(--on-tertiary-color);

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	ul,
	li,
	p {
		color: var(--on-tertiary-color);
	}
}
.white {
	background-color: var(--white);
	color: var(--black);

	p {
		color: var(--black);
	}
}
/* .outlined {
	background-color: var(--link-outlined-background);
	border: var(--link-outlined-border);
	padding: var(--link-outlined-padding);
	border-radius: var(--link-outlined-border-radius);
	color: var(--link-outlined-color);
}
.button-primary {
	background-color: var(--link-button-primary-background);
	color: var(--link-button-primary-color);
	padding: var(--link-button-padding);
	border-radius: var(--link-button-border-radius);
}
.button-secondary {
	background-color: var(--link-button-secondary-background);
	color: var(--link-button-secondary-color);
	padding: var(--link-button-padding);
	border-radius: var(--link-button-border-radius);
} */

/* Texts */

h1,
h2,
h3,
h4,
h5,
h6,
p,
b,
span,
a,
button,
input,
label,
select,
option,
textarea,
li {
	font-family: var(--font-primary);
	color: var(--text-primary-color);
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

.line {
	width: 100%;
	height: 2px;
	background: #ebf1ff;
}

.error {
	color: var(--text-error-color, --error-color, red);
}

.display-large {
	font-size: 57px;
	font-style: normal;
	font-weight: 900;
	line-height: 100%;
}

.display-medium {
	font-size: 45px;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
}

.display-small {
	font-size: 38px;
	font-style: normal;
	font-weight: 900;
	line-height: 44px;
}

.headline-large {
	font-size: 32px;
	font-style: normal;
	font-weight: 900;
	line-height: 40px;
}

.headline-medium {
	font-size: 28px;
	font-style: normal;
	font-weight: 900;
	line-height: 36px;
}

.headline-small {
	font-size: 22px;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
}

.title-large {
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.title-medium {
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}

.title-small {
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: 0.1px;
}

.label-large {
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.07px;
}

.label-medium {
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.06px;
}

.label-small {
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.5px;
}

.body {
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}

.body-bold {
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
}

.body-black {
	font-size: 16px;
	font-style: normal;
	font-weight: 900;
	line-height: 150%;
}

.body-medium {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}

.body-medium-bold {
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
}

.body-small {
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}

.body-small-bold {
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
}

/* Responsive */

.desktop {
	display: flex;
}

.mobile {
	display: none !important;
}

/* :global(.primary-fill path) {
	fill: var(--svg-primary);
}
:global(.secondary-fill path) {
	fill: var(--svg-secondary);
}
:global(.tertiary-fill path) {
	fill: var(--svg-tertiary);
}
:global(.white-fill path) {
	fill: var(--svg-white);
}
:global(.neutral-fill path) {
	fill: var(--svg-neutral);
}*/
/* Colors stroke */
/*:global(.primary-stroke path) {
	stroke: var(--svg-primary);
}
:global(.secondary-stroke path) {
	stroke: var(--svg-secondary);
}
:global(.tertiary-stroke path) {
	stroke: var(--svg-tertiary);
}
:global(.white-stroke path) {
	stroke: var(--svg-white);
}
:global(.neutral-stroke path) {
	stroke: var(--svg-neutral);
} */

@media screen and (max-width: 1024px) {
	.desktop {
		display: none !important;
	}

	.mobile {
		display: flex !important;
	}
}