:root {
	--accentLight3: #C1E4F4;
	--accentLight2: #9DC3E6;
	--accentLight1: #5E89CD;
	--accentBase: #4673C3;
	--accentDark1: #365AA8;
	--accentDark2: #233A84;
	--accentDark3: #0D155B;

	--elevation8: 0px 2px 4px rgba(0,0,0,0.04);	
	--elevation16: 0px 4px 8px rgba(0,0,0,0.15);
	--elevation32: 0px 8px 16px rgba(0,0,0,0.26);
	--commonCornerRadius: 7px;
	--controlCornerRadius: 3px;

	--bodyFontSize: 14px;
	--bodyLineHeight: 20px;

	--titleFontSize: 28px;
	--titleLineHeight: 36px;

	--largeFontSize: 18px;
	--largeLineHeight: 24px;

	--acrylicMaterial: url(data:image/png;base64,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);
}

:root {
	--backgroundColor: #C4D5EE;
	--backgroundImageWEBP: url(backgrounds/light.webp);
	--backgroundImageJPG: url(backgrounds/light.jpg);
	--textPrimary: #000;
	--textSecondary: rgba(0,0,0,0.6186);
	--textAccent: var(--accentDark2);
	--acrylicBase: rgba(243,243,243,0.9);
	--layerOnAcrylicBackground: rgba(255,255,255,0.4);
	--cardPrimaryBackground: rgba(255,255,255,0.7);
	--cardTertiaryBackground: rgba(255,255,255,1);
	--subtleSecondaryBackground: rgba(0,0,0,0.0373);
	--surfaceStroke: rgba(117,117,117,0.4);
	--cardStroke: rgba(0,0,0,0.0578);
	--accentDefault: var(--accentDark1);
	--accentText: var(--accentDark2);
}

@media (prefers-color-scheme: dark) {
	:root {
		--backgroundColor: #25304E;
		--backgroundImageWEBP: url(backgrounds/dark.webp);
		--backgroundImageJPG: url(backgrounds/dark.jpg);
		--textPrimary: #fff;
		--textSecondary: rgba(255,255,255,0.786);
		--textAccent: var(--accentLight3);
		--acrylicBase: rgba(32,32,32,0.92);
		--layerOnAcrylicBackground: rgba(255,255,255,0.0359);
		--cardPrimaryBackground: rgba(255,255,255,0.0512);
		--cardTertiaryBackground: rgba(255,255,255,0.0698);
		--subtleSecondaryBackground: rgba(255,255,255,0.0605);
		--surfaceStroke: rgba(117,117,117,0.4);
		--cardStroke: rgba(0,0,0,0.1);
		--accentDefault: var(--accentLight2);
		--accentText: var(--accentLight3);
	}
}

@font-face {
	font-family: 'Segoe UI Variable Small';
	src: local('Segoe UI Variable Small'), url('SegoeUIVariable_Lite.woff2') format('woff2');
	font-variation-settings: 'opsz' 1;
	font-weight: 300 400 500 600 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Segoe UI Variable Text';
	src: local('Segoe UI Variable Text'), url('SegoeUIVariable_Lite.woff2') format('woff2');
	font-variation-settings: 'opsz' 10.5;
	font-weight: 300 400 500 600 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Segoe UI Variable Display';
	src: local('Segoe UI Variable Display'), url('SegoeUIVariable_Lite.woff2') format('woff2');
	font-variation-settings: 'opsz' 36;
	font-weight: 300 400 500 600 700;
	font-style: normal;
	font-display: swap;
}

body {
	font-size: var(--bodyFontSize);
	line-height: var(--bodyLineHeight);
    font-family: "Segoe UI Variable Text", system-ui, sans-serif;
}

h3 {
	font-size: var(--titleFontSize);
	line-height: var(--titleLineHeight);
    font-family: "Segoe UI Variable Display", system-ui, sans-serif;
}

h4 {
	font-size: var(--largeFontSize);
	line-height: var(--largeLineHeight);
}


/* core.css file uses these variables, and this CSS code overrides the values of these variables. */
:root {
	--accentColor: var(--accentDefault);
	--foregroundColor: var(--textPrimary);
	--linkColor: var(--accentText);
	--bCardBackground: var(--acrylicBase);
	--bCardBorderColor: var(--surfaceStroke);
	--bCardFilter: blur(32px);
	--bCardShadow: var(--elevation32);
	--bCardCornerRadius: var(--commonCornerRadius);
	--bCardTopBackground: var(--acrylicMaterial);
	--bCardTopBackgroundBlendMode: overlay;
	--bCardTopBackgroundOpacity: 0.02;
	--layerBackground: var(--layerOnAcrylicBackground);
	--layerBorderColor: var(--cardStroke);
	--tabSelectedBackground: var(--subtleSecondaryBackground);
	--tabSelectedBackgroundCornerRadius: 4px;
	--tabSelectedIndicatorLength: 16px;
	--tabSelectedIndicatorCornerRadius: 1.5px;
	--cardBackground: var(--cardPrimaryBackground);
	--cardHoverBackground: var(--cardTertiaryBackground);
	--cardBorderColor: var(--cardStroke);
	--cardCornerRadius: var(--commonCornerRadius);
	--cardShadow: var(--elevation8);
	--cardForeground: var(--textSecondary);
	--personAvatarSize: 112px;
	--personAvatarShadow: var(--elevation16);
	--contentPadding: 16px;
	--contentSpacing: 12px;
	--contentTopPadding: 26px;
}