:root {
	/* Header Variables */
	--header-height: 3.5rem;
	--header-top-dist: calc(1rem / 1.5);
	--header-pad: 20px;

	/* Light Mode Colors 🌞 */
	--c-primary: #4F8CFF;     /* Soft Blue */
	--c-secondary: #A3BFFA;   /* Light Blue */
	--c-accent: #A259F7;      /* Purple Accent */
	--c-dark-accent: #7C3AED; /* Deep Purple */
	--c-background: #F7F9FB;  /* Very Light Gray */
	--c-surface: #FFFFFF;     /* White */
	--c-text: #23272F;        /* Almost Black */
	--c-subheading: #5B5F6B;  /* Muted Gray */
	--c-inv-text: #FFFFFF;    /* White */
	--c-error: #FF5A5F;       /* Coral Red */
	--c-success: #22C55E;     /* Green */

	/* Dark Mode Colors 🌚 */
	--cd-primary: #2DD4BF;       /* Teal */
	--cd-secondary: #818CF8;     /* Soft Indigo */
	--cd-accent: #F472B6;        /* Magenta Accent */
	--cd-background: #18181B;    /* Deep Charcoal */
	--cd-surface: #23272F;       /* Dark Gray */
	--cd-header-footer: #111113; /* Almost Black */
	--cd-text: #dadcdf;          /* Light Gray */
	--cd-inv-text: #000;         /* Deep Charcoal */
	--cd-error: #FB7185;         /* Soft Red */
	--cd-success: #4ADE80;       /* Light Green */
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-primary: var(--cd-primary);
        --c-secondary: var(--cd-secondary);
        --c-accent: var(--cd-accent);
        --c-background: var(--cd-background);
        --c-surface: var(--cd-surface);
        --c-text: var(--cd-text);
        --c-inv-text: var(--cd-inv-text);
        --c-error: var(--cd-error);
        --c-success: var(--cd-success);
    }
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
}

html {
	background-color: var(--c-background);
	color: var(--c-text);
	text-align: center;
}

body {
	overflow-x: hidden;
}