@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic");
@import url("https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,600,600i,800");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

:root {
	--bg: #f6f7f9;
	--heading: #1a2235;
	--body: #4d5a72;
	--graphic-txt: #332e28;
	--border: #e8e7e2;
	--ink: #1a1714;
	--ink-mid: #4a4a46;
	--ink-light: #888880;
	--grey-txt: #1e293b;
	--cool-grey: #e2e8f0;
	--muted: #8b97b2;
	--accent: #3d6fa3;
	--accent-soft: #eae0de;
	/* FOR CONV CASE STUDY */
	--conv-btn: #5b6bff;
	--conv-btn-dark: #4451d4;
	--node-bg: #eaf1f2;
	--node-border: #c8d8da;
	--node-text: #2a3838;
	/* FOR TABLE*/
	--chosen-bg: #e6f4f1;
	--chosen-border: #3a9a80;
	--chosen-col: #e8f5f0;
	--dot: #1a1e1e;
	--line: #a3abbd;
	--yellow: #f8bb64;
	--bright-yellow: #ffe359;
	--green: #1a7a4a;
	--teal: #3a8a9a;
	--teal-soft: #e8f4f6;
	--teal-dark: #2a6a78;
	--teal-bg: #5b8a90;
	--dark-card: #1c1e1b;
	--bar-bg: #dde8ea;
	--bar-fill: #3a8a9a;
	--green-card: #5a7a2a;
	--card-bg: #e8eff7;
	--dark-bg: #1c1e1b;
	--dark-mid: #2a2c28;
	--nav-bg: rgba(232, 239, 247, 0.85);
	/* --disp-serif: "DM Serif Display", serif; */
	--display: "Roboto Mono", monospace;
	--serif: "Cormorant Garamond", Georgia, serif;
	--mono: "Roboto Mono", monospace;
	--body-txt: "Lato", sans-serif;
	/* --sans: "DM Sans", sans-serif; */
	--theme-transition:
		background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
	/*  From case study */
	--cs-bg: #f2f2f2;
	--paper: #e8eff7;
	--surface: #f3f5f7;
	--green: #1a7a4a;
	--green-soft: #e8f5ee;
	--border: #e8e7e2;
	--nav-w: 220px;
}

[data-theme="dark"] {
	--bg: #141926;
	--heading: #e8ecf4;
	--body: #8b97b2;
	--ink: #ede9e3;
	--grey-txt: #f8fafc;
	--cool-grey: #334155;
	--muted: #4d5a72;
	--accent: #7aaad4;
	--line: #434b5e;
	--card-bg: #1e2330;
	--paper: #1e2330;
	--bright-yellow: #c4a62e;
	--nav-bg: rgba(30, 35, 48, 0.8);
}