/** @format */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&family=Roboto:wght@400;700&display=swap');

:root {
	--brand-background-dark: #080812;
	--brand-background-light: #ffffff;
	--brand-font-dark: #ffffff;
	--brand-font-light: #080812;
	--brand-blue: #27b1ff;
	--brand-green: #49f99a;
	--brand-teal: #46ffcd;
	--brand-purple: #bf00ff;
	--brand-navy: #000080;
	--brand-dark-grey: #202020;
	--brand-grey: #808080;
	--brand-light-grey: #cccccc;
	--font-header: 'Manrope', sans-serif;
	--font-body: 'Roboto', sans-serif;
}

/* Global Styles */
body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
}

/* Link Styles */
a {
	color: var(--brand-teal);
	text-decoration: none;
}

a:hover {
	color: var(--brand-green);
}

/* Button Styles */
button {
	background-color: var(--brand-blue);
	color: var(--brand-font-light);
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
}

button:hover {
	background-color: var(--brand-green);
}

/* Paragraph Styles */
p {
	line-height: 1.5;
	font-family: var(--font-body);
}

/* Heading Styles */
h1,
h2,
h3,
h4,
h5 {
	font-weight: bold;
	font-family: var(--font-header);
}

h1 {
	font-size: 24px;
}

h2 {
	font-size: 20px;
}

h3 {
	font-size: 18px;
}

h4 {
	font-size: 16px;
}

h5 {
	font-size: 14px;
}

/* Dark Mode Presets */
.brand-dark body {
	background-color: var(--brand-background-dark);
	color: var(--brand-font-dark);
}

.brand-dark a {
	color: var(--brand-teal);
}

.brand-dark a:hover {
	color: var(--brand-green);
}

.brand-dark button {
	background-color: var(--brand-blue);
	color: var(--brand-font-light);
}

.brand-dark button:hover {
	background-color: var(--brand-teal);
}

.brand-dark p {
	color: var(--brand-font-dark);
}

.brand-dark h1,
.brand-dark h2,
.brand-dark h3 {
	color: var(--brand-blue);
}

.brand-dark h4,
.brand-dark h5 {
	color: var(--brand-purple);
}

/* Light Mode Presets */
.brand-light body {
	background-color: var(--brand-background-light);
	color: var(--brand-font-light);
}

.brand-light a {
	color: var(--brand-blue);
}

.brand-light a:hover {
	color: var(--brand-green);
}

.brand-light button {
	background-color: var(--brand-blue);
	color: var(--brand-font-light);
}

.brand-light button:hover {
	background-color: var(--brand-green);
}

.brand-light p {
	color: var(--brand-font-light);
}

.brand-light h1,
.brand-light h2,
.brand-light h3 {
	color: var(--brand-blue);
}

.brand-light h4,
.brand-light h5 {
	color: var(--brand-purple);
}



/* brand Color Theme Swatches in Hex 
.brand-teal-hex {
	color: #46ffcd;
}
.brand-background-dark-hex {
	color: #080812;
}
.brand-blue-hex {
	color: #27b1ff;
}
.brand-purple-hex {
	color: #bf00ff;
}
.brand-green-hex {
	color: #49f99a;
}
*/

/* brand Color Theme Swatches in RGBA 
.brand-teal-rgba {
	color: rgba(70, 255, 205, 1);
}
.brand-background-dark-rgba {
	color: rgba(8, 8, 18, 1);
}
.brand-blue-rgba {
	color: rgba(39, 177, 255, 1);
}
.brand-purple-rgba {
	color: rgba(191, 0, 255, 1);
}
.brand-green-rgba {
	color: rgba(73, 249, 154, 1);
}
*/

/* brand Color Theme Swatches in HSLA 
.brand-teal-hsla {
	color: hsla(163, 100, 63, 1);
}
.brand-background-dark-hsla {
	color: hsla(240, 38, 5, 1);
}
.brand-blue-hsla {
	color: hsla(201, 100, 57, 1);
}
.brand-purple-hsla {
	color: hsla(284, 100, 50, 1);
}
.brand-green-hsla {
	color: hsla(147, 93, 63, 1);
}
*/