/* Global CSS Variables */
:root {
	/* Color System */
	--color-primary: #18181b;
	--color-secondary: #14b8a6;
	--color-text-primary: #ffffff;
	--color-text-secondary: #27272a;
	--color-background: transparent;
	--color-hover: rgba(255, 255, 255, 0.15);
	--color-fill: rgba(175, 175, 175, 0.035);
	--color-focus: var(--color-secondary);

	/* Typography */
	--font-family-base: 'KenneyFuture', sans-serif;
	--font-family-easy: 'InterRegular', sans-serif;
	--font-size-base: 16px;
	--font-size-lg: 3.5vmin;
	--font-size-xl: 7vmin;

	/* Spacing */
	--spacing-sm: 0.5rem;
	--spacing-base: 1rem;
	--spacing-lg: 2rem;
	--spacing-xl: 4rem;

	/* Layout - Fixed responsive padding */
	--content-width-desktop: 80vw;
	--content-padding-desktop: 20vw;
	--content-padding-tablet: 12vw;
	--content-padding-mobile: 8vw;

	/* Media - Max Width Settings */
	--max-width-xxl: 1030px;
	--max-width-xl: 925px;
	--max-width-l: 610px;
	--max-width-m: 480px;

	/* Current responsive padding that updates */
	--content-padding-current: var(--content-padding-desktop);

	/* Transitions */
	--transition-speed: 0.3s;
	--transition-ease: cubic-bezier(0.28, 1.79, 0.72, 0.72);

	/* Z-index layers */
	--z-index-toolbar: 3;
	--z-index-overlay: 10;
	--z-index-modal: 50;
}

/* Font Face */
@font-face {
	font-family: 'KenneyFuture';
	src: url('/fonts/Kenney%20Future.woff2') format('woff2');
	font-display: swap;
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'InterRegular';
	src: url('/fonts/Inter-Regular.woff2') format('woff2');
	font-display: swap;
	font-weight: normal;
}

/* Add fallback font loading */
.font-loading {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

html {
	scrollbar-width: none;
	width: 100vw;
	height: 100%;
	background: var(--color-primary) !important;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	min-height: 100vh;
	min-height: 100svh;
	overscroll-behavior: none;
}

body {
	margin: 0;
	padding: 0;
	line-height: 1.35;
	background: var(--color-background) !important;
	min-height: 100vh;
	min-height: 100svh;
	overscroll-behavior: none;
}

/* Hide scrollbars */
::-webkit-scrollbar {
	display: none;
}

/* Accessibility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
}

/* Focus States */
:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

.landing-container,
.globe-container {
	background: transparent !important;
}

/* 🌍 Globe component overrides */
.globe-viewer canvas {
	background: transparent !important;
}

/* Globe scene transparency */
.globe-container {
	background: transparent !important;
}

/* Common Media Queries - Update current padding */
@media (max-width: var(--max-width-xl)) {
	:root {
		--content-padding-current: var(--content-padding-tablet);
	}
}

@media (max-width: var(--max-width-l)) {
	:root {
		--content-padding-current: var(--content-padding-mobile);
	}
}

@media (max-width: var(--max-width-m)) {
	:root {
		--content-padding-current: 6vw;
	}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}