/* ========================================
	SHARED CSS VARIABLES & UTILITIES
	======================================== */

:root {
	/* Spacing */
	--pady: clamp(20px, 10%, 60px);
	--containerWidth: 1140px;

	/* Colors */
	--color-primary: #fbc72f;
	--color-primary-dark: #e6b800;
	--color-primary-darker: #b28810;
	--color-black: #000;
	--color-white: #fff;
	/* Gray Scale (lightest to darkest) */
	--gray-50: #f7f8fc;   /* lightest background */
	--gray-100: #f3f3f3;  /* very light */
	--gray-200: #ececf1;  /* light border */
	--gray-300: #e0e0e0;  /* light */
	--gray-400: #d0d0d0;  /* medium-light */
	--gray-500: #a0a0a0;  /* medium */
	--gray-600: #8d8d8d;  /* medium-dark */
	--gray-700: #808080;  /* dark */
	--gray-800: #666;     /* darker */
	--gray-900: #595959;  /* darkest text */

	/* Dark backgrounds */
	--gray-950: #282828;  /* dark gray background */
	--gray-975: #262626;  /* darker background */
	--gray-1000: #000;    /* black */

	/* Typography */
	--font-family: 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Typography - Hierarchy based on XL */
	--heading-size-xl: clamp(32px, 4vw, 56px);
	--heading-size-lg: clamp(28px, 3.2vw, 42px);
	--heading-size-md: clamp(24px, 2.8vw, 32px);
	--heading-size-sm: clamp(20px, 2.4vw, 28px);
	--text-size-lg: clamp(18px, 2vw, 24px);
	--text-size-md: clamp(16px, 1.6vw, 18px);
	--text-size-sm: clamp(14px, 1.4vw, 16px);
	--text-size-xs: clamp(12px, 1.2vw, 14px);

	/* Border Radius */
	--radius-sm: 8px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 1rem;
	--radius-3xl: 1.5rem;
	--radius-round: 20px;

	/* Shadows */
	--shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 8px 30px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
	--shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.25);
	--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
	--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}


/* ========================================
	PADDING UTILITY CLASSES
	======================================== */
.padx {
	--padx: 5%;

	@media (min-width: 1024px) {
		--padx: 10%;
	}
}

.padx-sm {
	--padx: 2.5%;

	@media (min-width: 1024px) {
		--padx: 5%;
	}
}

.nopadx {
	--padx: 0;
}

/* ========================================
	CONTAINER UTILITIES
	======================================== */
.container {
	max-width: calc(var(--containerWidth) + (var(--padx) * 2));
	margin: 0 auto;
	padding: var(--pady) var(--padx);
}