@layer base {
	:root {
		/* Font Families */
		--font-family-heading: 'Mulish', sans-serif;
		--font-family-text: 'Public Sans', sans-serif;
		--font-family-monospace: 'Menlo', monospace;

		/* Font Weights */
		--font-weight-thin: 300;
		--font-weight-regular: 400;
		--font-weight-semibold: 500;
		--font-weight-bold: 600;
		--font-weight-bolder: 700;

		/* Font Sizes */
		--font-size-4xl: 2.25rem;  /* 36px */
		--font-size-3xl: 2rem;     /* 32px */
		--font-size-2xl: 1.75rem;  /* 28px */
		--font-size-xl: 1.5rem;    /* 24px */
		--font-size-lg: 1.25rem;   /* 20px */
		--font-size-base: 1rem;    /* 16px */
		--font-size-sm: 0.875rem;  /* 14px */
		--font-size-xs: 0.75rem;   /* 12px */

		/* Line Heights */
		--line-height-xs: 100%;
		--line-height-sm: 120%;
		--line-height-md: 145%;
		--line-height-base: 160%;

		/* Letter Spacing */
		--letter-spacing-base: 0%;

		/* Paragraph Spacing */
		--paragraph-spacing-base: 0px;

		/* Text Decoration */
		--text-decoration-underline: underline;
		--text-decoration-none: none;
	}

	.b-font-heading {
		font-family: var(--font-family-heading);
		line-height: var(--line-height-sm);
		letter-spacing: var(--letter-spacing-base);
		color: var(--color-text-primary);
	}

	.b-font-text {
		font-family: var(--font-family-text);
		font-weight: var(--font-weight-thin);
		line-height: var(--line-height-base);
		letter-spacing: var(--letter-spacing-base);
		color: var(--color-text-primary);
	}

	.b-font-monospace {
		font-family: var(--font-family-monospace);
		line-height: var(--line-height-base);
		letter-spacing: var(--letter-spacing-base);
	}
}
