@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
	--font-system-ui: 'Roboto', Helvetica, Arial, sans-serif;
	--cf3-btn-border-radius: 0.5rem;

	/* Light Theme */
	--light-background-color: #ffffff;
	--light-secondary-color: #f4f4f4;
	--light-surface-color: #ffffff;
	--light-text-primary: #111111;
	--light-text-secondary: #666666;
	--light-border-color: #e0e0e0;

	/* Dark Theme */
	--dark-background-color: #111111;
	--dark-secondary-color: #1f1f2e;
	--dark-surface-color: #2a2a3c;
	--dark-text-primary: #ffffff;
	--dark-text-secondary: #bbbbbb;
	--dark-border-color: #444444;

	/* Brand (VNCOMMODITY) */
	--vnc-red: #E63323;
	--vnc-green: #00C49A;
	--vnc-blue: #007ACC;
	--vnc-yellow: #FFF176;
	--vnc-black: #111111;

	/* Function */
	--hot-primary: var(--vnc-red);
	--hot-secondary: #F39244;
	--cold-primary: #00ADB5;
	--cold-secondary: #0dcaf0;

	--vnc-shadow: rgba(0, 0, 0, 0.1);
}
body.light {
	background-color: var(--light-background-color);
	color: var(--light-text-primary);
	font-family: var(--font-system-ui);
}

body.dark {
	background-color: var(--dark-background-color);
	color: var(--dark-text-primary);
	font-family: var(--font-system-ui);
}
/* HEADER */
.top-header,
.footer {
	background-color: var(--light-surface-color);
	color: var(--light-text-primary);
	border-bottom: 1px solid var(--light-border-color);
}

body.dark .top-header,
body.dark .footer {
	background-color: var(--dark-surface-color);
	color: var(--dark-text-primary);
	border-bottom: 1px solid var(--dark-border-color);
}

/* MENU */
.top-menu,
.navbar-nav {
	background-color: var(--hot-primary);
	color: #fff;
}

.navbar-nav a {
	color: #fff;
	padding: 10px 15px;
	text-transform: uppercase;
	font-weight: 600;
}

.navbar-nav a:hover,
.navbar-nav a.active {
	background-color: var(--hot-secondary);
	color: #fff;
	border-radius: 4px;
}
h1, h2, h3, h4, h5, h6 {
	color: inherit;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

p {
	color: inherit;
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.text-muted {
	color: var(--light-text-secondary);
}

body.dark .text-muted {
	color: var(--dark-text-secondary);
}

a {
	color: var(--hot-primary);
	text-decoration: none;
	transition: 0.3s ease;
}

a:hover {
	color: var(--hot-secondary);
}
button,
.btn {
	background-color: var(--hot-primary);
	color: #fff;
	border-radius: var(--cf3-btn-border-radius);
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	transition: 0.3s ease;
}

button:hover,
.btn:hover {
	background-color: var(--hot-secondary);
}

.card {
	background-color: var(--light-surface-color);
	color: var(--light-text-primary);
	box-shadow: 0 2px 8px var(--vnc-shadow);
	border-radius: 0.5rem;
	padding: 1.5rem;
}

body.dark .card {
	background-color: var(--dark-surface-color);
	color: var(--dark-text-primary);
}