:root {
	--color-background: #000000;
	--color-background-light: #ecf1f6;
	--color-text-primary: #ffffff;
	--color-text-secondary: #99999b;
	--color-text-tertiary: #626262;
	--color-text-dark: #000000;
	--color-text-dark-secondary: #0f1221;
	--color-accent: #2467e0;
	--color-accent-hover: #1e56b6;
	--color-accent-light: rgba(36, 103, 224, 0.3);
	--color-card-background: #191e20;
	--color-card-background-dark: #0f1221;
	--color-card-background-light: #ffffff;
	--color-gray: #333333;
	--color-white: #ffffff;
	--color-border: #434343;
	--color-border-dark: #3f3f3f;
	--color-border-darker: #2e2e2e;
	--color-accent-green: #26f64c;
	--color-button-hover: rgba(255, 255, 255, 0.1);
	--color-header-background: rgba(7, 8, 9, 0.9);
	--white-100: #fff;
	--white-10: rgba(255, 255, 255, 0.1);
	--black-100: #000;
	--black-10: rgba(0, 0, 0, 0.1);

	--color-gray-50: #f9fafb;
	--color-gray-100: #f3f4f6;
	--color-gray-200: #e5e7eb;
	--color-gray-300: #d1d5db;
	--color-gray-400: #9ca3af;
	--color-gray-500: #6b7280;
	--color-gray-600: #4b5563;
	--color-gray-700: #374151;
	--color-gray-800: #1f2937;
	--color-gray-900: #111827;
	--color-gray-950: #0f172a;

	--color-blue-400: #60a5fa;
	--color-blue-500: #2563eb;
	--color-blue-600: #1d4ed8;
	--color-blue-700: #1e40af;

	--color-red-300: #fca5a5;
	--color-red-400: #f87171;
	--color-red-500: #ef4444;
	--color-red-600: #dc2626;
	--color-red-700: #b91c1c;

	--color-green-400: #4ade80;
	--color-green-500: #22c55e;

	--font-family: "Involve", sans-serif;
	--font-family-secondary: "Unbounded", sans-serif;
	--font-family-tertiary: "Unbounded", sans-serif;
	--font-family-quaternary: "Inter", sans-serif;
	--font-family-quinary: "Inter", sans-serif;

	--text-2xs: 0.625rem;
	--text-xs: 0.75rem;
	--text-sm: 0.8125rem;
	--text-base: 0.875rem;
	--text-md: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.75rem;
	--text-4xl: 1.875rem;
	--text-5xl: 2rem;
	--text-6xl: 2.5rem;
	--text-7xl: 3rem;
	--text-8xl: 3.75rem;

	--space-0: 0;
	--space-px: 1px;
	--space-0-5: 0.125rem;
	--space-1: 0.25rem;
	--space-1-5: 0.375rem;
	--space-2: 0.5rem;
	--space-2-5: 0.625rem;
	--space-3: 0.75rem;
	--space-3-5: 0.875rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-7: 1.75rem;
	--space-8: 1.875rem;
	--space-9: 2rem;
	--space-10: 2.5rem;
	--space-11: 3rem;
	--space-12: 3.125rem;
	--space-14: 3.75rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	--radius-none: 0;
	--radius-xs: 0.25rem;
	--radius-sm: 0.3125rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.625rem;
	--radius-xl: 0.75rem;
	--radius-2xl: 1rem;
	--radius-3xl: 1.25rem;
	--radius-4xl: 1.5rem;
	--radius-5xl: 1.875rem;
	--radius-full: 50%;
	--radius-pill: 999px;

	--shadow-xs: 0 1px 2px rgb(0 0 0 / .05);
	--shadow-sm: 0 4px 16px rgb(0 0 0 / .1);
	--shadow-md: 0 8px 24px rgb(0 0 0 / .15);
	--shadow-lg: 0 10px 30px rgb(0 0 0 / .3);
	--shadow-xl: 0 12px 40px rgb(0 0 0 / .35);
	--shadow-2xl: 0 25px 50px rgb(0 0 0 / .25);
	--shadow-card: 0 4px 30px rgb(0 0 0 / .1);

	--glass-bg: rgb(255 255 255 / 10%);
	--glass-bg-dark: rgb(0 0 0 / 10%);
	--glass-border: 1px solid rgb(255 255 255 / 10%);
	--glass-blur: blur(10px);
	--glass-blur-sm: blur(5px);
	--glass-blur-lg: blur(15px);

	--container-padding: 7.5rem;
	--container-padding-sm: 4.25rem;
	--container-padding-xs: 3.8125rem;

	--transition-base: 0.3s ease;
	--transition-fast: 0.15s ease;
	--transition-slow: 0.5s ease;

	--header-height: 10.1875rem;
	--header-height-scrolled: 5.1875rem;

	--swiper-scrollbar-width: 0.1875rem;
	--swiper-scrollbar-bg-color: #252525;
	--swiper-scrollbar-drag-bg-color: #bbb;
	--swiper-scrollbar-border-radius: 0;

	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-modal-backdrop: 400;
	--z-modal: 500;
	--z-popover: 600;
	--z-tooltip: 700;
}

@media (max-width: 1500px) {
  :root {
    --container-padding: 6.25rem;
  }
}
@media (max-width: 1199px) {
	:root {
		--container-padding: 2.5rem;
		--container-padding-sm: 2.5rem;
		--container-padding-xs: 2.5rem;

		--header-height: 7.375rem;
		--header-height-scrolled: 4.875rem;
	}
}

@media (max-width: 768px) {
	:root {
		--container-padding: 0.9375rem;
		--container-padding-sm: 0.9375rem;
		--container-padding-xs: 0.9375rem;

		--header-height: 5.5rem;
		--header-height-scrolled: 4.25rem;
	}
}