@import '../../default/scss/landing-page.scss';

@layer base {

	:root {
		--background: 0 0% 98%;
		--foreground: 0 0% 17%;
		--heading-foreground: 0 0% 17%;
		--primary: 0 0% 0%;
		--primary-foreground: 0 0% 100%;

		--font-body: 'Inter';
		--font-heading: 'Spline Sans';

		--h1-font-size: 4.75rem; // 76px
		--h1-font-weight: 700;
		--h1-letter-spacing: -0.01em;

		--h2-font-size: 2.625rem; // 42px
		--h2-line-height: 1.1em;
		--h2-font-weight: 700;
		--h2-letter-spacing: -0.01em;

		--h3-font-size: 2rem; // 32px
		--h3-line-height: 1.1em;
		--h3-font-weight: 600;
		--h3-letter-spacing: -0.01em;

		--h4-font-size: 1.375rem; // 22px
		--h4-line-height: 1.1em;
		--h4-font-weight: 600;
		--h4-letter-spacing: -0.01em;

		--h5-font-family: var(--headings-font-family);
		--h5-font-size: 1.1875rem; //19px
		--h5-letter-spacing: 0;
		--h5-font-weight: 600;

		--h6-font-family: var(--headings-font-family);
		--h6-font-size: 1.0625rem; //17px
		--h6-letter-spacing: -0.005em;
		--h6-font-weight: 600;

		--gradient-1: #5AAAF6;
		--gradient-2: #D52FCA;
		--gradient-3: #FF4754;
		--gradient-4: #FFB33B;
		--gradient-5: #43CC3E;

		--gradient-stops: var(--gradient-1), var(--gradient-2), var(--gradient-3), var(--gradient-4), var(--gradient-5);
	}
}

@layer components {
	@import './components/outline-glow';
}