/**
 * Fonts and design tokens, identical to the approved mockups (home v8, foundation v3).
 * Light by default. Dark when the person picks "Escuro", or when "Auto" (or the login page)
 * meets a device set to dark.
 */

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

@font-face {
	font-family: "Unbounded";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2");
}

:root {
	color-scheme: light;
	--ink: #15171c;
	--ink2: #4a505c;
	--ink3: #868c98;
	--line: #e7e9ed;
	--line2: #f0f1f4;
	--bg: #f5f6f8;
	--panel: #fff;
	--panel2: #fafbfc;
	--soft: #f1f2f5;
	--soft2: #f6f7f9;
	--brand: #fb8104;
	--brand-ink: #b25800;
	--brand-soft: #fff5eb;
	--pri-bg: #15171c;
	--pri-fg: #fff;
	--blue-bg: #eaf2fd;
	--blue-fg: #1d5fae;
	--green-bg: #ebf7ef;
	--green-fg: #16803c;
	--amber-bg: #fff3e3;
	--amber-fg: #c26100;
	--gray-bg: #f1f2f5;
	--gray-fg: #4a505c;
	--red-bg: #fdeeec;
	--red-fg: #b42318;
	--red-line: #f5c2bc;
	--trk-off: #e7e9ed;
	--trk-on: #4a505c;
	--side: #14161b;
	--side-line: rgba(255, 255, 255, .08);
	--shadow: 0 12px 32px rgba(16, 24, 40, .12);
	--focus: rgba(251, 129, 4, .35);
	--font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Unbounded", "Inter", system-ui, sans-serif;
	--side-w: 248px;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--ink: #eceef2;
	--ink2: #b4b9c3;
	--ink3: #7f8591;
	--line: #262a32;
	--line2: #1e2228;
	--bg: #0e1013;
	--panel: #16191e;
	--panel2: #1a1d23;
	--soft: #21252c;
	--soft2: #1c1f25;
	--brand-ink: #ffab52;
	--brand-soft: rgba(251, 129, 4, .14);
	--pri-bg: #eceef2;
	--pri-fg: #15171c;
	--blue-bg: rgba(77, 148, 255, .15);
	--blue-fg: #86b6ff;
	--green-bg: rgba(34, 160, 90, .17);
	--green-fg: #62d497;
	--amber-bg: rgba(251, 129, 4, .16);
	--amber-fg: #ffab52;
	--gray-bg: #252a31;
	--gray-fg: #b4b9c3;
	--red-bg: rgba(240, 68, 56, .14);
	--red-fg: #ff9b8f;
	--red-line: rgba(240, 68, 56, .35);
	--trk-off: #2a2e36;
	--trk-on: #a3a9b4;
	--side: #08090b;
	--side-line: rgba(255, 255, 255, .06);
	--shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"],
	:root:not([data-theme]) {
		color-scheme: dark;
		--ink: #eceef2;
		--ink2: #b4b9c3;
		--ink3: #7f8591;
		--line: #262a32;
		--line2: #1e2228;
		--bg: #0e1013;
		--panel: #16191e;
		--panel2: #1a1d23;
		--soft: #21252c;
		--soft2: #1c1f25;
		--brand-ink: #ffab52;
		--brand-soft: rgba(251, 129, 4, .14);
		--pri-bg: #eceef2;
		--pri-fg: #15171c;
		--blue-bg: rgba(77, 148, 255, .15);
		--blue-fg: #86b6ff;
		--green-bg: rgba(34, 160, 90, .17);
		--green-fg: #62d497;
		--amber-bg: rgba(251, 129, 4, .16);
		--amber-fg: #ffab52;
		--gray-bg: #252a31;
		--gray-fg: #b4b9c3;
		--red-bg: rgba(240, 68, 56, .14);
		--red-fg: #ff9b8f;
		--red-line: rgba(240, 68, 56, .35);
		--trk-off: #2a2e36;
		--trk-on: #a3a9b4;
		--side: #08090b;
		--side-line: rgba(255, 255, 255, .06);
		--shadow: 0 12px 32px rgba(0, 0, 0, .5);
	}
}

/* Icons from assets/icons.svg, printed with xp_icon(). */
.i {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.i--sm {
	width: 14px;
	height: 14px;
}