/* -------------------------------------------------------------------------- */
/*                                CSS Variables                               */
/* -------------------------------------------------------------------------- */
@use "mixins" as m;

:root {
	/* --------------------------------- Colors --------------------------------- */
	/* Dark. */
	--nfd-wba-color-dark: #1e1e1e;
	--nfd-wba-color-dark-rgb: 30 30 30;

	// lighter.
	--nfd-wba-color-dark-lighter: #3c434a;
	--nfd-wba-color-dark-lighter-rgb: 60 67 74;

	// Brand green.
	--nfd-wba-color-brand: #178113;
	--nfd-wba-color-brand-rgb: 23 129 19;

	// 5% darker.
	--nfd-wba-color-brand-darker: #3e8f3b;
	--nfd-wba-color-brand-darker-rgb: 62 143 59;

	// 10% darker
	--nfd-wba-color-brand-darker-10: #378534;
	--nfd-wba-color-brand-darker-10-rgb: 55 133 52;

	// Grey.
	--nfd-wba-color-grey: #e3e3e3;
	--nfd-wba-color-grey-rgb: 240 240 240;

	--nfd-wba-color-grey-darker: #aeaeae;
	--nfd-wba-color-grey-darker-rgb: 174 174 174;

	/* --nfd-wba-color-borders: rgba(0, 0, 0, 0.1); */
	--nfd-wba-color-borders: #cccccc;

	/* ---------------------------------- Sizes --------------------------------- */
	--nfd-wba-sidebar-width: 290px;
	--nfd-wba-header-height: 70px;
	--nfd-wba-border-radius--lg: 8px;
	--nfd-wba-masonry-gap: 24px;

	@include m.responsive(small) {
		--nfd-wba-masonry-gap: 32px;
	}

	/* ------------------------------- Transition ------------------------------- */
	--nfd-wba-transition-duration: 100ms;
	--nfd-wba-transition-timing: linear;
}