@font-face {
	font-family: 'RobotoCondensed';
	src: url('/assets/roboto_condensed_medium.woff2') format('woff2');
	font-display: block;
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'RobotoCondensed';
	src: url('/assets/roboto_condensed_black.woff2') format('woff2');
	font-display: block;
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto';
	src: url('/assets/roboto_regular.woff2') format('woff2');
	font-display: block;
	font-weight: 400;
	font-style: normal;
}

[role="navigation"],
un-nav,
#area-1 {
	font-family: RobotoCondensed;
}

h1,
h2,
h3,
h4 {
	font-family: RobotoCondensed;
}

body {
	font-family: Roboto;
}

html {
	/* hues */
	--triad-1: color-mix(in oklch longer hue, var(--primary) 33%, var(--primary-clone));
	--triad-2: color-mix(in oklch longer hue, var(--primary) 66%, var(--primary-clone));
	--analogous-1: color-mix(in oklch longer hue, var(--primary) 20%, var(--primary-clone));
	--analogous-2: color-mix(in oklch longer hue, var(--primary) 10%, var(--primary-clone));
	--analogous-3: color-mix(in oklch longer hue, var(--primary), var(--primary-clone) 10%);
	--analogous-4: color-mix(in oklch longer hue, var(--primary), var(--primary-clone) 20%);
	--primary-clone: color-mix(in oklch, var(--primary), white 0.001%);
	--complementary: color-mix(in oklch longer hue, var(--primary), var(--primary-clone));
	--split-complementary-1: color-mix(in oklch longer hue, var(--primary) 41.666%, var(--primary-clone));
	--split-complementary-2: color-mix(in oklch longer hue, var(--primary) 58.333%, var(--primary-clone));
	/* primary tones */
	--primary-alpha-95: color-mix(in oklab, var(--primary), transparent 95%);
	--primary-alpha-85: color-mix(in oklab, var(--primary), transparent 85%);
	--primary-alpha-75: color-mix(in oklab, var(--primary), transparent 75%);
	--primary-alpha-50: color-mix(in oklab, var(--primary), transparent 50%);
	--primary-alpha-25: color-mix(in oklab, var(--primary), transparent 25%);
	--primary-white-85: color-mix(in oklab, var(--primary), white 85%);
	--primary-white-75: color-mix(in oklab, var(--primary), white 75%);
	--primary-white-60: color-mix(in oklab, var(--primary), white 60%);
	--primary-white-50: color-mix(in oklab, var(--primary), white 50%);
	--primary-white-40: color-mix(in oklab, var(--primary), white 40%);
	--primary-white-30: color-mix(in oklab, var(--primary), white 30%);
	--primary-white-20: color-mix(in oklab, var(--primary), white 20%);
	--primary-white-10: color-mix(in oklab, var(--primary), white 10%);
	--primary-white-5: color-mix(in oklab, var(--primary), white 5%);
	--primary-black-50: color-mix(in oklab, var(--primary), black 50%);
	--primary-black-25: color-mix(in oklab, var(--primary), black 25%);
	--primary-black-15: color-mix(in oklab, var(--primary), black 15%);
	--primary-black-10: color-mix(in oklab, var(--primary), black 10%);
	/* complementary tones */
	--complementary-alpha-95: color-mix(in oklab, var(--complementary), transparent 95%);
	--complementary-alpha-85: color-mix(in oklab, var(--complementary), transparent 85%);
	--complementary-alpha-75: color-mix(in oklab, var(--complementary), transparent 75%);
	--complementary-alpha-50: color-mix(in oklab, var(--complementary), transparent 50%);
	--complementary-alpha-25: color-mix(in oklab, var(--complementary), transparent 25%);
	--complementary-white-85: color-mix(in oklab, var(--complementary), white 85%);
	--complementary-white-75: color-mix(in oklab, var(--complementary), white 75%);
	--complementary-white-60: color-mix(in oklab, var(--complementary), white 60%);
	--complementary-white-30: color-mix(in oklab, var(--complementary), white 30%);
	--complementary-white-10: color-mix(in oklab, var(--complementary), white 10%);
	--complementary-white-5: color-mix(in oklab, var(--complementary), white 5%);
}

html {
	--primary: #6e98aa;
	--secondary: #ffffff;
}

body {
	background-image: url("/assets/imgs/5360e416-9608-48da-9493-a641998f2b55-mirrored.webp");
}