/* ========================================================
	VERSICOLOR WEBSITE 2026
	BASE CSS
======================================================== */



/* ============================
	ROOT
============================ */

:root {
	--vc-black: #19162D;
	--vc-border: #E8E3F2;
	--vc-cream: #FFF8E8;
	--vc-cyan: #16C8D8;
	--vc-deep-purple: #191636;
	--vc-green: #A8C911;
	--vc-green-bright: #CFE539;
	--vc-grey-light: #EEEEEE;
	--vc-grey: #766F86;
	--vc-grey-dark: #38334D;
	--vc-light: #FFFFFF;
	--vc-line: #ECE6F5;
	--vc-orange: #FF8A00;
	--vc-pink: #FF3F7A;
	--vc-purple: #7E6BE8;
	--vc-red: #FF4A54;
	--vc-soft: #FBF8FF;
	--vc-white: #FFFFFF;
	--vc-yellow: #F6DE2F;
	--vc-font-body: 'Eina 01', 'Instrument Sans', Helvetica, Arial, sans-serif;
	--vc-font-heading: 'Fraunces', Georgia, serif;
	--vc-font-ui: 'Eina 01', 'Instrument Sans', Helvetica, Arial, sans-serif;
	--vc-shadow-card: 0 18px 44px rgba(25, 22, 54, .075);
	--vc-shadow-button: 0 12px 28px rgba(25, 22, 54, .08);
	--vc-shadow-button-hover: 0 16px 34px rgba(25, 22, 54, .13);
}



/* ============================
	RESET
============================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration: none;
	transition: all .3s ease;
}

a:hover {
	text-decoration: none;
}

body {
	background-color: var(--vc-white);
	color: var(--vc-black);
	font-family: var(--vc-font-body);
	margin: 0;
	overflow-x: hidden;
	padding: 0;
}

button,
input,
label,
li,
p,
select,
span,
textarea {
	font-family: var(--vc-font-body);
}

html {
	scroll-behavior: smooth;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
}

strong {
	font-weight: 800;
}



/* ============================
	TYPOGRAPHY
============================ */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--vc-black);
	font-family: var(--vc-font-heading);
	font-style: normal;
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.04;
	margin: 0;
}

p {
	color: var(--vc-black);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.65;
	margin: 0;
}

.vc--sectionlabel {
	color: var(--vc-pink);
	display: inline-block;
	font-family: var(--vc-font-ui);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .13rem;
	line-height: 1;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.vc--sectiontext {
	color: var(--vc-black);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.75;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.vc--sectiontitle {
	color: var(--vc-black);
	font-family: var(--vc-font-heading);
	font-size: clamp(2.25rem, 3.25vw, 3.5rem);
	font-weight: 500;
	letter-spacing: -.025em;
	line-height: 1.04;
	margin-bottom: 1.35rem;
	text-align: center;
}



/* ============================
	LAYOUT
============================ */

.site--container {
	max-width: 1760px;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}



/* ============================
	BUTTONS
============================ */

.vc--button,
.topbar--button {
	align-items: center;
	border: 0;
	border-radius: 10rem;
	box-shadow: var(--vc-shadow-button);
	display: inline-flex;
	font-family: var(--vc-font-ui);
	font-size: 1.15rem;
	font-weight: bold;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	min-height: 54px;
	padding: .95rem 1.45rem 1rem 1.45rem;
	transition: all .3s ease;
	white-space: nowrap;
}

.vc--button:hover,
.topbar--button:hover {
	box-shadow: var(--vc-shadow-button-hover);
	transform: translateY(-2px);
}

.vc--button--hero {
	background-color: var(--vc-green-bright);
	color: var(--vc-black);
}

.vc--button--hero:hover {
	background-color: var(--vc-green);
	color: var(--vc-black);
}

.vc--button--neutral {
	background-color: var(--vc-white);
	color: var(--vc-black);
}

.vc--button--neutral:hover {
	background-color: var(--vc-purple);
	color: var(--vc-white);
}

.vc--button--primary {
	background-color: var(--vc-orange);
	color: var(--vc-white);
}

.vc--button--primary:hover {
	background-color: var(--vc-deep-purple);
	color: var(--vc-white);
}

.vc--button--secondary {
	background-color: var(--vc-purple);
	color: var(--vc-white);
}

.vc--button--secondary:hover {
	background-color: var(--vc-deep-purple);
	color: var(--vc-white);
}



/* ============================
	IMAGE HELPERS
============================ */

.vc--image {
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: all .3s ease;
	width: 100%;
}

.vc--imagebox {
	background-color: var(--vc-cream);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.vc--imagebox::before {
	background: linear-gradient(135deg, rgba(246, 222, 47, .18) 0%, rgba(255, 255, 255, 0) 52%, rgba(126, 107, 232, .12) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}



/* ============================
	BACKGROUNDS
============================ */

.vc--section--plain {
	background-color: var(--vc-white);
}

.vc--section--soft {
	background-color: var(--vc-soft);
}

.vc--section--warm {
	background-color: #FFFCF6;
}

.vc--section--accent {
	background:
		linear-gradient(135deg, rgba(207, 229, 57, .08) 0%, rgba(255, 255, 255, 1) 48%, rgba(126, 107, 232, .075) 100%);
}



/* ============================
	ACCESSIBILITY
============================ */

:focus-visible {
	outline: 3px solid rgba(126, 107, 232, .42);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}