/* ==========================================================================
   Voove Global CSS — Color System & Typography
   Design system foundation for voove.com
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
	/* ---- Brand Colors ---- */
	--voove-black: #0A0A0A;
	--voove-dark-grey: #1A1A1A;
	--voove-red: #E31937;
	--voove-red-hover: #B8142D;
	--voove-white: #FFFFFF;
	--voove-light-grey: #B0B0B0;
	--voove-charcoal: #2A2A2A;
	--voove-success: #22C55E;
	--voove-warning: #F59E0B;

	/* ---- Typography ---- */
	--voove-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--voove-font-size-h1: clamp(2.25rem, 4vw + 1rem, 4rem);
	--voove-font-size-h2: clamp(1.75rem, 3vw + 0.75rem, 3rem);
	--voove-font-size-h3: clamp(1.375rem, 2vw + 0.5rem, 2rem);
	--voove-font-size-h4: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);
	--voove-font-size-base: 16px;
	--voove-font-size-sm: 0.875rem;
	--voove-font-size-xs: 0.75rem;

	/* ---- Spacing ---- */
	--voove-section-padding: clamp(3rem, 6vw, 6rem);
	--voove-container-max: 1200px;
	--voove-gap: 2rem;

	/* ---- Transitions ---- */
	--voove-transition: 0.3s ease;

	/* ---- Border Radius ---- */
	--voove-radius: 8px;
	--voove-radius-sm: 4px;
}

/* ==========================================================================
   2. Base Reset
   ========================================================================== */

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

body {
	margin: 0;
	padding: 0;
	font-family: var(--voove-font);
	font-size: var(--voove-font-size-base);
	line-height: 1.6;
	color: var(--voove-white);
	background-color: var(--voove-black);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	color: var(--voove-white);
	font-weight: 700;
	line-height: 1.2;
}

h1 {
	font-size: var(--voove-font-size-h1);
}

h2 {
	font-size: var(--voove-font-size-h2);
}

h3 {
	font-size: var(--voove-font-size-h3);
}

h4 {
	font-size: var(--voove-font-size-h4);
}

h5 {
	font-size: 1.125rem;
}

h6 {
	font-size: 1rem;
}

p {
	margin-top: 0;
	color: var(--voove-light-grey);
	line-height: 1.7;
}

a {
	color: var(--voove-red);
	text-decoration: none;
	transition: color var(--voove-transition);
}

a:hover,
a:focus {
	color: var(--voove-red-hover);
}

ul,
ol {
	color: var(--voove-light-grey);
}

blockquote {
	border-left: 4px solid var(--voove-red);
	margin-left: 0;
	padding-left: 1.5rem;
	color: var(--voove-light-grey);
	font-style: italic;
}

/* ==========================================================================
   4. Button Classes
   ========================================================================== */

.voove-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 2rem;
	font-family: var(--voove-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--voove-radius);
	cursor: pointer;
	transition: background-color var(--voove-transition),
		color var(--voove-transition),
		border-color var(--voove-transition),
		transform var(--voove-transition);
}

.voove-btn:hover {
	transform: translateY(-1px);
}

.voove-btn:active {
	transform: translateY(0);
}

.voove-btn--primary {
	background-color: var(--voove-red);
	color: var(--voove-white);
	border-color: var(--voove-red);
}

.voove-btn--primary:hover,
.voove-btn--primary:focus {
	background-color: var(--voove-red-hover);
	border-color: var(--voove-red-hover);
	color: var(--voove-white);
}

.voove-btn--outline {
	background-color: transparent;
	color: var(--voove-white);
	border-color: var(--voove-white);
}

.voove-btn--outline:hover,
.voove-btn--outline:focus {
	background-color: var(--voove-white);
	color: var(--voove-black);
}

/* ==========================================================================
   5. Layout Helpers
   ========================================================================== */

.voove-container {
	width: 100%;
	max-width: var(--voove-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--voove-gap);
	padding-right: var(--voove-gap);
}

.voove-section {
	padding-top: var(--voove-section-padding);
	padding-bottom: var(--voove-section-padding);
}

.voove-section--dark {
	background-color: var(--voove-dark-grey);
}

.voove-section--black {
	background-color: var(--voove-black);
}

.voove-section--red {
	background-color: var(--voove-red);
}

.voove-section--red h1,
.voove-section--red h2,
.voove-section--red h3,
.voove-section--red h4,
.voove-section--red h5,
.voove-section--red h6 {
	color: var(--voove-white);
}

.voove-section--red p {
	color: rgba(255, 255, 255, 0.9);
}

.voove-section--red a {
	color: var(--voove-white);
	text-decoration: underline;
}

.voove-section--red a:hover,
.voove-section--red a:focus {
	color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   6. Elementor Overrides
   ========================================================================== */

/* Section backgrounds */
.elementor-section {
	background-color: var(--voove-black);
}

.elementor-section[data-settings*="dark"] {
	background-color: var(--voove-dark-grey);
}

/* Heading widget */
.elementor-widget-heading .elementor-heading-title {
	color: var(--voove-white);
	font-family: var(--voove-font);
}

/* Text editor widget */
.elementor-widget-text-editor {
	color: var(--voove-light-grey);
	font-family: var(--voove-font);
}

/* Button widget */
.elementor-button {
	background-color: var(--voove-red);
	border-radius: var(--voove-radius);
	font-family: var(--voove-font);
	font-weight: 600;
	transition: background-color var(--voove-transition),
		transform var(--voove-transition);
}

.elementor-button:hover,
.elementor-button:focus {
	background-color: var(--voove-red-hover);
	transform: translateY(-1px);
}

.elementor-button-link .elementor-button {
	color: var(--voove-white);
}

/* Icon widget */
.elementor-widget-icon .elementor-icon {
	color: var(--voove-red);
}

/* Divider widget */
.elementor-widget-divider .elementor-divider-separator {
	border-color: var(--voove-charcoal);
}

/* Elementor form inputs */
.elementor-field-group .elementor-field {
	background-color: var(--voove-dark-grey);
	border: 1px solid var(--voove-charcoal);
	color: var(--voove-white);
	border-radius: var(--voove-radius-sm);
	font-family: var(--voove-font);
}

.elementor-field-group .elementor-field:focus {
	border-color: var(--voove-red);
	outline: none;
}

.elementor-field-group .elementor-field::placeholder {
	color: var(--voove-light-grey);
}

/* ==========================================================================
   7. Extras
   ========================================================================== */

/* Selection color */
::selection {
	background-color: var(--voove-red);
	color: var(--voove-white);
}

::-moz-selection {
	background-color: var(--voove-red);
	color: var(--voove-white);
}

/* Dark scrollbar */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--voove-black);
}

::-webkit-scrollbar-thumb {
	background: var(--voove-charcoal);
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--voove-light-grey);
}

/* Firefox scrollbar */
html {
	scrollbar-width: thin;
	scrollbar-color: var(--voove-charcoal) var(--voove-black);
}

/* Screen reader only utility */
.voove-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}