@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Spline+Sans:wght@300..700&display=swap');

body {
	font-size: var(--text-base);
	font-family: var(--font-headers);
	font-optical-sizing: auto;
	font-style: normal;
	color: var(--color-fg);
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-texts);
	font-optical-sizing: auto;
}

:root {
	/* COLORS */
	--color-bg: #ffffff;
	--color-bg-clear: #eaeaea;
	--color-fg: #000000;
	--color-muted: #666666;
	--color-accent: #ff6600;
	--color-accent-hover: #e55a00;

	/* TYPOGRAPHY */
	--font-headers: 'Spline Sans', sans-serif;
	--font-texts: 'Outfit', sans-serif;

	/* FONT SIZES */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;

	/* SPACING */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;

	/* RADIUS */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-full: 50px;

	--border-thin: 1px solid var(--color-muted);
	--border-thick: 2px solid var(--color-accent);
}

.text-accent {
	color: var(--color-accent);
}

.bg-accent {
	background-color: var(--color-accent);
	color: var(--color-bg);
}